Angular 已分配表单验证器输入但 return 错误

Question

在我的注册组件中，我创建了一个用于验证输入字段的表单组。

this.UserForm = new FormGroup({
  name: new FormControl('', Validators.required),
  surname: new FormControl('', Validators.required),
  username: new FormControl('', Validators.compose([
    Validators.required,
    Validators.pattern('^[a-zA-Z0-9._-]+$')
  ])),
  etc...
})

所以我有输入及其控制

<mat-form-field>
  <mat-label>Name</mat-label>
  <input #name matInput type="text" [value]="userData.name" formControlName="name"
        (change)="onChangeName(name.value)" required>
  <mat-error *ngFor="let validation of account_validation_messages.name">
        <mat-error class="error-message" 
            *ngIf="newUserForm.get('nameUser').hasError(validation.type)
             && (newUserForm.get('nameUser').dirty || newUserForm.get('nameUser').touched)">
                    {{validation.message}}</mat-error>
         </mat-error>
  </mat-form-field>
 <mat-form-field>

并且有效...但是...如果我使用相同的组件进行用户更新，它会用

填充输入

[value]="userData.name"

如果我“触摸”它...它给我错误，好像它是空的...但它不是...

我该如何解决这个错误？？？

Answer 1

在使用响应式表单时，您应该使用 newUserForm.get('nameUser').setValue( … ) 而不是 [value]="…"。

Angular 已分配表单验证器输入但 return 错误

Angular Form Validator input assigned but return error

angular

forms

validation

input

mat-form-field