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