如果用户输入的字符超过 5 个，则不显示"超过最大字符数"消息

Question

我正在尝试检查用户输入的主题是空的还是超过最大字符。如果用户不是，则应显示：必填信息消息。如果用户输入超过 5 个字符，则应显示"超过最大字符"。 我不知道如果用户立即在代码上输入超过 5 个字符，为什么不会显示超过最大字符的消息。

这是 HTML 文件

<form class="add-form"
[formGroup]="addForm"
novalidate>
<div class="add-form__group">
<label for="subject"
class="add-form__label">
Subject
</label>
<input class="add--form__input"
[class.add-form__input--error]="(hasError('subject') || hasError('subject', 'maxlength'))"
formControlName="subject"
id="subject"
name="subject"
type="text"
placeholder="Enter a Subject Line"/>
<ng-container *ngIf="(hasError('subject') || hasError('subject', 'maxlength'))">
<p class="add-form__error-label"
*ngIf="addForm.get('subject').errors.required">
Required Information
</p>
<p class="add-form__error-label"
*ngIf="addForm.get('subject').errors.maxlength">
Exceeds Maximum Character
</p>
</ng-container>
</div>
</form>

TS 文件

export class AddFormComponent implements OnInit {
constructor(private fb: FormBuilder) {
/** On Init */
public ngOnInit(): void {
this.initAddForm();
}
public addForm: FormGroup;
/** Checks If Controller has Error */
public hasError(controlName: string, error: string = 'required'): boolean {
const controller: FormControl = this.addForm.get(controlName) as FormControl;
return controller.hasError(error) && controller.touched;
}
private initAddForm(): void {
this.addForm = this.fb.group({
subject: ['', [Validators.required, Validators.maxLength(5)]],
});
}
}
```````````````````````````````````````````````````````````````````

Answer 1

我想这是因为下面的行。

以前：

public hasError(controlName: string, error: string = 'required'): boolean {
const controller: FormControl = this.addForm.get(controlName) as FormControl;
return controller.hasError(error) && controller.touched;
}

在此代码中，触摸仅在 tab 键输出后更改，作为替代用法pristine在字段中键入时更新。

public hasError(controlName: string, error: string = 'required'): boolean {
const controller: FormControl = this.addForm.get(
controlName
) as FormControl;
return controller.hasError(error) && !controller.pristine;
}

分叉堆叠闪电战