Question

我有一个要进行验证的棱角形式。现在，当第一次加载textarea时，如果我输入违反验证的内容，它不会显示错误。

当我将焦点更改为其他元素时，将显示错误。

但是，在此之后，只要有违规情况，只要不需要更改焦点，就会立即显示错误。

<form [formGroup]="AddEditform" novalidate autocomplete="off">
    <mat-form-field appearance="outline">
        <textarea matInput name="user" formControlName="users" id="user">
        </textarea>
        <mat-error
            *ngIf="!AddEditform.valid && AddEditform.get('users').hasError('maxlength')"
        >
            Exceeded maximum length
        </mat-error>
    </<mat-form-field>
</form>


AddEditform: FormGroup;

constructor(
  private fb: FormBuilder,
) { }

ngOnInit() {

  this.AddEditform = this.fb.group({
    users: [
      '',
      [
        Validators.maxLength(100)
      ],
    ],
  });
}

为什么会发生这种现象？为什么在没有焦点变更的情况下第一次无法进行验证？

Answer 1

您可以将updateOn属性添加到您的form group：

ngOnInit() {

  this.AddEditform = this.fb.group({
    users: [
      '',
      [
        Validators.maxLength(100)
      ],
    ],
  },
 {updateOn: 'change'} 
);
}

每当模型值更改时，这将触发验证。

Answer 2

在StackBlitz Link中找到的相同解决方案

您的<mat-error>中存在错误，发生输入值更改验证时未触发。解决方案，您必须在class.ts文件中使用自定义ErrorStateMatcher，并且需要在模板中告知您需要自定义ErrorStateMatcher。

component.html

<form  novalidate autocomplete="off">
     <mat-form-field appearance="outline">
         <textarea matInput #inputValue name="user" 
              [formControl]="users" id="user" [errorStateMatcher]="matcher" >
         </textarea>
       <mat-error>
         Exceeded maximum length
       </mat-error>
    </mat-form-field>
</form>

component.ts

export class AppComponent  {
    name = 'Angular';
    AddEditform: FormGroup;
    users = new FormControl('', [Validators.maxLength(5)]);
    matcher = new MyErrorStateMatcher();

    ngOnInit(){ }
}

export class MyErrorStateMatcher implements ErrorStateMatcher {
       isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
            const isSubmitted = form && form.submitted;
            return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
        }
}

Answer 3

基于FormBuilder

<块引用>

updateOn：应更新控件的事件（选项：'change' | 'blur' | submit'）

它对我有用

ngOnInit() {
  this.AddEditform = this.fb.group({
     users: ['', [Validators.required]],
   },{updateOn: 'blur'} )
}

角度表单验证仅在焦点更改后有效

3 个答案: