將formControlName和ngModel一起使用的角度6棄用

Question

我有角度6項目。 我一起使用ngModel和formControlName。 但是角度在下面給了我警告。 例如，當我從網格中的按鈕打開更新彈出窗口時，我可以輕松地自動綁定更新彈出窗口中的輸入。 但angular 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與formGroup實在是奇怪。 您應該刪除ngModel ，而是綁定ngModel上的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 2

您只需選擇ngModel表示您使用模板驅動表單或formControlName表示您使用的是反應形式。 https://angular.io/guide/reactive-forms如果你想要一個簡單的表單，只需在每個輸入中刪除formControlName。 如果您想在表單中執行更多操作，可以通過刪除ngModel並添加名稱屬性（如name=nameSurname來使用反應形式

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一起使用。 如果你想讓它自動化，也許你可以解析你的對象，你可以使用元素鍵為每個元素創建一個新參數。 然后，您可以使用您的對象修補formGroup。