angular 6 弃用 formControlName 和 ngModel 一起使用 [英] angular 6 deprecation of using formControlName and ngModel together

查看：31
本文介绍了angular 6 弃用 formControlName 和 ngModel 一起使用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

角度警告:

 看起来你在同一个表单域上使用 ngModel作为表单控件名称.支持使用 ngModel 输入属性和已弃用带有反应形式指令的 ngModelChange 事件在 Angular v6 中，将在 Angular v7 中删除.

myHtml

<p-对话框><div class="ui-g-12 form-group"><div class="ui-g-4"><label>Name 姓氏</label>

<div class="ui-g-8"><input pInputText [(ngModel)]="selectedStudent.nameSurname" formControlName="nameSurname"/>

<div class="ui-g-12 form-group"><div class="ui-g-4"><label>电子邮件</label>

<div class="ui-g-8"><input pInputText [(ngModel)]="selectedStudent.email" formControlName="email"/>

<div class="ui-g-12 form-group"><div class="ui-g-4"><label>年龄</label>

<div class="ui-g-8"><input pInputText [(ngModel)]="selectedStudent.age" formControlName="age"/>

<button type="button" pButton icon="fa fa-check" (click)="save()" label="Save"></button></p-对话框></表单>

解决方案

拥有 ngModel 和 formGroup 真的很奇怪.您应该删除 ngModel 并改为在 fromGroup 上绑定 valueChanges ，然后遍历接收到的数据并分配值.

//表单构建的地方this.studentForm.valueChanges.subscribe(data => this.onStudentFormValueChange(data));私人 onStudentFormValueChange(数据){this.selectedStudent.age = data.agethis.selectedStudent.email = data.emailthis.selectedStudent.nameSurname = data.nameSurname//或者for (this.studentForm.controls 中的常量键) {const control = this.studentForm.get(key);this.selectedStudent[key] = control.value}}

I have angular 6 project. And I was using ngModel and formControlName together. But angular gave me warning in below. Forexamle when I open update popup from button in grid, I can easily bind inputs in update popup automatically. But angular 7 says that remove ngModel. So, I must always map everything to my student object. What is the best way for this? Can we give formValueType to form value like studentObject in below code and then can it bind automatically?

Angular warning: 

     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>

解决方案

Having ngModel with formGroup is really odd. You should remove ngModel and instead bind on valueChanges on fromGroup and then just iterate through received data and assign values.

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

这篇关于angular 6 弃用 formControlName 和 ngModel 一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆