angular 6 条关于使用 formControlName 和 ngModel 的警告

Question

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

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

For more information on this, see our API docs here: https://angular.io/api/forms/FormControlName#use-with-ngmodel

它到底说了什么？ link 没有 #use-with-ngmodel

的任何片段

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

Answer 1

现在您可以在此处找到文档：

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

所以你有 3 个选择：

使用响应式表单
使用模板驱动的表单
静音警告（不推荐）

<!-- language: lang-ts -->

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

Answer 2

添加

[ngModelOptions]="{standalone: true}"

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

Answer 3

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

Answer 4

使用 formControl（反应式表单）与 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;

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

angular 6 条关于使用 formControlName 和 ngModel 的警告

angular 6 warning for using formControlName and ngModel

angular

angular-ngmodel

angular-reactive-forms