Question

我最近将角度版本升级到6-rc。我收到了以下警告

您似乎在同一表单字段上使用ngModel   formControlName。支持使用ngModel输入属性和   不推荐使用带有响应式表单指令的ngModelChange事件   在Angular v6中，将在Angular v7中删除

有关此内容的更多信息，请参阅我们的API文档：       https://angular.io/api/forms/FormControlName#use-with-ngmodel

它到底是什么意思？该链接没有#use-with-ngmodel

的任何片段

我想我需要删除ngModel并使用formGroup作为我的数据绑定对象。

Answer 1

如果您现在正在寻找Angular 6文档，请使用https://next.angular.io

https://next.angular.io/api/forms/FormControlName#use-with-ngmodel

所以你有3个选择：

使用反应表格
使用模板驱动表格

沉默警告（不推荐）

imports: [
  ReactiveFormsModule.withConfig({warnOnNgModelWithFormControl: 'never'});
]

Answer 2

从formGroup的每个字段中删除[(ngModel)]包含formControlName并按如下所示在控制器类中设置值，只是this.form.get('first').setValue('some value');不要显式关闭或静默警告

Answer 3

添加

[ngModelOptions]="{standalone: true}"

您可以从有角网站https://angular.io/api/forms/NgModel中阅读更多内容

Answer 4

使用formControl（reactive Forms）与Rxjs结合使用更加简单，因此Angular团队更改了对它的使用。

更改html文件

<!-- [ngModel]='model' (ngModelChange)='changed($event)' -->

到

[formControl]="myControl"

更改ts文件

model: string;
  modelChanged: Subject<string> = new Subject<string>();

  changed(text: string) {
      this.modelChanged.next(text);
  }
  this.modelChanged.pipe(
      .subscribe(model => this.postErrorMessage = model);

到

this.myControl.valueChanges.pipe(
      .subscribe(model => this.postErrorMessage = model);

Answer 5

因此，当我尝试在mat-select中显示用户的头像时，我偶然发现了这一点：

<mat-form-field [formGroup]="assignedToFormGroup">
<mat-select placeholder="Assign to" [(ngModel)]="assignedTo" formControlName="assignTo">
  <mat-select-trigger>
    <img style="vertical-align:middle;" aria-hidden
      src="{{assignedToFormGroup.controls['assignTo'].value.photoUrl}}" height="20" />
    <span>@{{assignedToFormGroup.controls['assignTo'].value.userName}}</span>
  </mat-select-trigger>
  <!-- {{user.userName}} -->
  <mat-option *ngFor="let user of members" [value]="user">
    <img style="vertical-align:middle;" aria-hidden src="{{user.photoUrl}}" height="20" />
    <span>@{{user.userName}}</span>
  </mat-option>
</mat-select>

在控制器中，formGroup是这样定义的：

public assignedToFormGroup: FormGroup;

我遵循了Sohail的建议，并从我的HTML代码中删除了[(ngModel)]：

<mat-form-field [formGroup]="assignedToFormGroup">
<mat-select placeholder="Assign to" formControlName="assignTo">
  <mat-select-trigger>
    <img style="vertical-align:middle;" aria-hidden
      src="{{assignedToFormGroup.controls['assignTo'].value.photoUrl}}" height="20" />
    <span>@{{assignedToFormGroup.controls['assignTo'].value.userName}}</span>
  </mat-select-trigger>
  <!-- {{user.userName}} -->
  <mat-option *ngFor="let user of members" [value]="user">
    <img style="vertical-align:middle;" aria-hidden src="{{user.photoUrl}}" height="20" />
    <span>@{{user.userName}}</span>
  </mat-option>
</mat-select>

这在打开页面时给了我错误-我尝试从null加载photoUrl和userName，因为通过删除[（ngModel）]，我还删除了mat-select中的默认选择。

因此，我修改了控制器以执行以下操作： 1.构造函数：

this.assignedToFormGroup.controls['assignTo'].setValue({photoUrl: '', userName: ''});

保存表单的按钮动作-添加以下行：

let assignedTo = this.assignedToFormGroup.controls['assignTo'].value;

那确实有效。现在，我在页面加载时设置默认选择，并在提交表单时读取选定的值。我知道这不是最好的和最漂亮的解决方案，但我想我会分享的-可能是更好解决方案的好起点。

使用formControlName和ngModel的angular 6警告

5 个答案: