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

Question

在我的 sing-up 组件中，我创建了一个表单组来验证输入字段。

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]="…"。