Question

我在Angular中使用相同的Reactive Form进行添加和编辑。

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

我使用required验证器，它适用于“添加”＃39;如果我没有在现场输入任何内容，则会显示警告信息。

<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错误？

Answer 1

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

this.form.setValue(singleUser)

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

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

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

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

this.form.value

Angular Reactive Edit Form Pre-Populated Fields仍然触发＆＃34; required＆＃34;错误

1 个答案: