Question

我有Angular 6项目。我一起使用ngModel和formControlName。但是下面的角度给了我警告。例如，当我从网格中的按钮打开更新弹出窗口时，我可以轻松地将输入自动绑定到更新弹出窗口中。但是角度7表示删除ngModel。因此，我必须始终将所有内容映射到我的学生对象。最好的方法是什么？我们可以在下面的代码中将formValueType赋予诸如StudentObject这样的表单值，然后它可以自动绑定吗？

角度警告：

     It looks like you're using ngModel on the same form field 
as formControlName. Support for using the ngModel input property and 
ngModelChange event with reactive form directives has been deprecated
 in Angular v6 and will be removed in Angular v7.

myHtml

<form [formGroup]="studentForm" ??????formValueType="studentObject"?????>
  <p-dialog>
    <div class="ui-g-12 form-group">
      <div class="ui-g-4">
        <label>Name Surname</label>
      </div>
      <div class="ui-g-8">
        <input pInputText [(ngModel)]="selectedStudent.nameSurname"  formControlName="nameSurname" />
      </div>
    </div>
    <div class="ui-g-12 form-group">
      <div class="ui-g-4">
        <label>Email</label>
      </div>
      <div class="ui-g-8">
        <input pInputText [(ngModel)]="selectedStudent.email" formControlName="email" />
      </div>
    </div>
        <div class="ui-g-12 form-group">
          <div class="ui-g-4">
            <label>Age</label>
          </div>
          <div class="ui-g-8">
            <input pInputText [(ngModel)]="selectedStudent.age"  formControlName="age" />
          </div>
        </div>
      </div>
    <button type="button" pButton icon="fa fa-check" (click)="save()" label="Save"></button>
  </p-dialog>
</form>

Answer 1

您只需选择ngModel表示您正在使用模板驱动的表单，或者选择formControlName表示您正在使用反应式。 https://angular.io/guide/reactive-forms 如果您想要一个简单的表单，只需在每个输入中删除formControlName。如果您想以表格形式做更多事情，可以通过删除ngModel并添加来使用反应形式名称属性，例如name=nameSurname

Answer 2

将ngModel与formGroup一起使用确实很奇怪。您应该删除ngModel，然后绑定到fromGroup的valueChanges上，然后遍历接收到的数据并分配值。

 //somewhere where form is build
 this.studentForm.valueChanges.subscribe(data => this.onStudentFormValueChange(data));

 private onStudentFormValueChange(data) {
    this.selectedStudent.age = data.age
    this.selectedStudent.email = data.email
    this.selectedStudent.nameSurname = data.nameSurname

    // or
    for (const key in this.studentForm.controls) {
       const control = this.studentForm.get(key);
       this.selectedStudent[key] = control.value
    }
}

Answer 3

不需要同时使用（ngModel和formControlName）

在更新时，您可以使用反应式表单

 patchValue(value: {...}, options: {...}): void

https://angular.io/api/forms/FormGroup

对于您的情况，您将需要

this.studentForm.patchValue({
  nameSurname : 'Some Name',
  email : 'example@email.com,
  age : '24'
})

这会将值预先填写到表单中，您可以轻松地使用同一表单进行更新

Answer 4

最好的方法是将ReactiveForms与formGroup和formControlName一起使用。如果要使其自动化，则可以解析对象，并使用element键为每个元素创建一个新参数。然后，您可以使用对象来修补formGroup。

一起使用formControlName和ngModel的angular 6弃用

4 个答案: