使用 formControlName 和 ngModel 的角度 6 警告

Question

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

看起来您在同一个表单字段上使用 ngModel 窗体控件名称。支持使用 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 个选择：

1. 使用响应式表单

2. 使用模板驱动的表单

3. 静音警告（不推荐）

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

Answer 2

从 formGroup 中包含 formControlName 的每个字段中删除 [(ngModel)] 并在控制器类中设置值，如下简单 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 中的默认选择。

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

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

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

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

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

Answer 5

结合 Rxjs 使用 formControl(reactive Forms) 更直接，因此 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);