Angular 角度6不赞成同时使用formControlName和ngModel

我有一个项目。我同时使用了ngModel和formControlName。但angular在下面给了我警告。当我从网格中的按钮打开更新弹出窗口时，我可以轻松地自动绑定更新弹出窗口中的输入。但angular 7表示，删除NG7模型。因此，我必须始终将所有内容映射到我的学生对象。最好的方法是什么？我们可以在下面的代码中给formValueType指定类似studentObject的form值，然后它可以自动绑定吗

角度警告：

     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>

姓名
电子邮件
年龄

您只需选择ngModel（表示您正在使用模板驱动表单）或formControlName（表示您正在使用被动表单）。 如果您想要一个简单的表单，只需在每个输入中删除formControlName。 如果您想在表单中做更多的事情，您可以通过删除ngModel和添加来使用被动表单

---

name属性，如

name=nameurname

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

更新时，您可以使用

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

对于你的情况，你需要像

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

---

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

将

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
    }
}

---

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

谢谢您的回复。但在本例中，页面上只有三个输入。但在实际场景中，有50多个输入。映射所有这些属性对于所有页面来说都是非常大的工作。但当我使用ngModel时，它会自动绑定。如何自动绑定@KrutiChoksiPatel{nameSurname:'某个名字'，电子邮件：'example@email.com，age:'24'}是的，这个对象可以通过for循环键获得。谢谢你的回复。使用模板驱动的表单非常简单，所有内容都可以自动完成。但是，在这一点上我无法确认。使用反应式表单非常困难，而且编写的代码越来越多。但是，我从回复中了解到，在未来将不会使用模板驱动。技术将继续以反应形式出现。这是真的吗？因为我要开始一个新项目，我必须从中选择一个@Ktin@HasanOzdemir当然，您可以对模板驱动的表单进行验证：但我还是选择反应式表单：）如果我从反应式表单开始进行项目，那么我不能在项目中的任何地方使用模板驱动。换句话说，有些页面是被动的，有些页面是模板驱动（混合）的，这是不好的。这是真的吗@AJT_82@HasanOzdemir是的，您不能（将来）将模板驱动和反应式表单混合在一起。我很高兴这个反对的警告现在已经存在，因为人们已经以这种方式“滥用”太多了；）但您可以使用反应式表单或模板驱动表单，只是不要在同一表单中使用它们：）谢谢您的回复@AJT_82。我的最后一个问题是：我决定我的项目中的所有表单都是反应式表单。报告和数据网格页面将在我的项目中由模板驱动。我认为，这是最好的办法。我说的对吗？如何用这种方法处理初始值？分配初始值？我认为这不会自动绑定

输入

，

选择

，…我将以被动形式启动一个大型项目。但是@HDJEMAI说，这种用法有什么问题吗。或者任何其他问题？您的意思是将值初始绑定到

selectedStudent

或

studentForm

？绑定到studentForm@PatrykBrejdakNo，它不会将初始值分配给

studentForm

，因为它只是从

studentForm

控件复制

selectedStudent

的值。我的错，我误解了你的问题，这实际上取决于你的形式是如何建立的@哈萨诺兹德米尔，你能展示一下你是如何建立自己的形式的吗？您是否在每次切换

selectedStudent

时都重新生成表单？请参阅。这里清楚地提到了为什么不推荐这种用法，以及最好的选择是什么。