使用 formControlName 和 ngModel 的 angular 6 警告

Question

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

看起来您在与 formControlName 相同的表单字段上使用 ngModel。 Angular v6 中不推荐使用 ngModel 输入属性和 ngModelChange 事件与响应式表单指令，并将在 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个选择：

1. 使用反应形式

2. 使用模板驱动的表单

3. 静音警告（不推荐）

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

Answer 2

从[(ngModel)]每个字段中删除[(ngModel)]包含formControlName和控制器类中的设置值如下简单this.form.get('first').setValue('some value'); 不要明确关闭或静音警告

Answer 3

添加

[ngModelOptions]="{standalone: true}" 

您可以从 angular 网站https://angular.io/api/forms/NgModel阅读更多信息

Answer 4

所以我在尝试在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默认mat-select 。

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

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

2. 我保存表单的按钮操作 - 添加了以下行：

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

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

Answer 5

使用 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);