Angular Reactive Edit Form Pre-Populated Fields 仍然触发“必需”错误答案

【问题标题】：Angular Reactive Edit Form Pre-Populated Fields still triggers "required" errorAngular Reactive Edit Form Pre-Populated Fields 仍然触发“必需”错误
【发布时间】：2017-12-15 06:40:23
【问题描述】：

我在 Angular 中使用相同的响应式表单进行添加和编辑。

this.form = fb.group({
            username:['',Validators.required ],
            email:['',Validators.required]            
        })

我使用required 验证器，当我没有在字段中输入任何内容并出现警告消息时，它适用于“添加”。

<form [formGroup]="form" (ngSubmit)="submit()">
    <div class="form-group">
        <label for="username">Username</label>
        <input [(ngModel)]="user.name" type="text" class="form-control" 
formControlName="username" value={{(singleUser|async)?.name}}>
        <div *ngIf="form.controls.username.touched && 
!form.controls.username.valid" class="alert alert-danger">
            Username is required
        </div>  
    </div>

但是，对于编辑，当我显示具有填充现有值的表单时，required 错误会在我 touched 字段时触发并且不对现有值进行任何更改。因此，警告信息也会出现。

但在这种情况下，它不应该显示警告消息，因为存在一个我没有对其进行任何更改的现有值。

我如何编码，以便在编辑时不会为预填充的现有值触发 required 错误？

【问题讨论】：

标签： angular validation angular-reactive-forms

【解决方案1】：

您设置的表单值不正确。使用反应式表单时，您应该以编程方式而不是在模板中执行操作。这意味着您需要删除 value="..."，并且在您的组件中，一旦您获取了数据，您就可以这样做：

this.form.setValue(singleUser)

或者设置单个表单控件的值：

this.form.get('username').setValue(singleUser.username)

在设置整个表单的值时，您可能会遇到 .setValue 错误，因为该方法需要一个与为您的 FormGroup 定义的对象具有完全相同的属性的对象。因此，您必须始终使用具有用户名和电子邮件属性的对象来设置值。如果对象可能不具有所有属性，请改用 patchValue 方法。这将简单地设置任何匹配属性的值并忽略任何额外的值，例如，如果对象也有一个 id 属性。

您还应该删除您正在使用 ngModel 执行的操作。这属于 FormsModule，混合使用它们是一种不好的做法。你已经拥有了表单的价值

this.form.value

【讨论】：