Angular 使用formControlName和ngModel的角度6警告

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

看起来您在与相同的表单字段上使用了ngModel formControlName。支持使用ngModel输入属性和 不推荐使用带有反应式表单指令的ngModelChange事件 在Angular v6中，将在Angular v7中删除

有关这方面的更多信息，请参见我们的API文档：

它到底说了什么？链接没有任何片段可用于ngmodel

---

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

如果您现在正在查找Angular 6文档，请使用

因此，您有3种选择：

使用反应形式

使用模板驱动的表单

不建议使用静音警告

进口：[ ReactiveFormsModule.withConfig{warnOnNgModelWithFormControl:'never'}； ] 加

---

您可以从angular网站上阅读更多内容

从formGroup中包含formControlName和控制器类中设置值的每个字段中删除[ngModel]，如下所示；不要明确关闭或关闭警告

使用FormControlResponsive Forms与Rxjs结合使用更为直接，因此Angular团队改变了对它的使用

更改html文件

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

更改ts文件

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

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

---

因此，当我试图在mat select中显示用户的化身时，我偶然发现了这一点：

我听从了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>

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

让assignedTo=this.assignedToFormGroup.controls['assignTo'].value

这确实奏效了。现在我在页面加载上设置默认选择，并在提交表单时读取所选值。

---

我知道这不是最好、最漂亮的解决方案，但我想我会与大家分享——这可能是更好解决方案的良好起点。

您需要转到下一个文档：；虽然v6是候选版本，但文档仍然引用v5。我们使用ngModel进行数据验证，使用formControl进行验证。@Akshay我们也做了同样的事情。将整个应用程序更改为手动从反应式表单控件获取/设置值似乎太大了。在Angular 6反应式表单中是否有任何getter/setter的快捷方式，就像C.net中的字符串_myProperty{get；set；}一样？如果你有一种形式的大量输入，你的代码会不会变得太难阅读？我们所有使用Angular的人都越来越完全脱离了真实的网络编程世界。哦，我的上帝。改变语法和一直有效的东西有什么意义？我花了一天的时间升级到Angular 6，现在才找到这个。我注意到我的onchange选择事件没有触发。这是因为他们把奇怪的语法从onChange改为selectionChange。真的很有用。还有更多：对于常见的输入文本、文本区域、选择、复选框等，现在，通过被动表单配置强制禁用。。。美好的您不能使用all time used disabled=true。最糟糕的是：如果你制作了自己的ui组件库。。。Angular可能不知道什么是禁用的。。。很好…对于正在开发的全新应用程序，以上3个选项中，你会推荐哪一个？@Stephane我会推荐使用反应式formshow你在没有ngModel的情况下获得反应式表单的价值吗？我想很多人会对Angular不支持ngModel使用formControlName而不是完全不支持ngModel这一事实感到困惑。这意味着什么模板驱动的表单将不复存在，人们应该改用反应式表单？是的，但为了更好地理解angular文档，我编写了一段平静的代码。举个例子，试图提高对文档的阅读和理解。没有模板，你如何获得价值ngmodel@Flash，this.form.get'fieldName'.value

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

<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>

public assignedToFormGroup: FormGroup;

<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>

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