如何在 Angular Material 中不使用 ngModel 设置双向绑定答案

【问题标题】：How to set two way binding without using ngModel in Angular Material如何在 Angular Material 中不使用 ngModel 设置双向绑定
【发布时间】：2019-02-21 09:37:41
【问题描述】：

我正在尝试在不使用 ngModel 的情况下将表单项绑定到对象。但它不起作用。

我尝试使用 [(value)]="" 属性。但是，元素的初始值更改为“未定义”。

https://material.angular.io/components/input/overview

<mat-form-field class="col-md-4">
    <input matInput placeholder="First name" formControlName="firstCtrl" [(value)]="formData.firstName">
    <mat-error>First name can not be left blank</mat-error>
</mat-form-field>

formData = new RawFormData;

但是这个工作正常：

<mat-form-field>
    <mat-select placeholder="Title" formControlName="titleCtrl" [(value)]="formData.gender">
          <mat-option *ngFor="let title of personalTitle" [value]="title.value">{{title.viewValue}}</mat-option>
    </mat-select>
</mat-form-field>

【问题讨论】：

使用 ngModel 进行双向绑定。 ngModel 有什么问题。发布错误
如果你需要双向绑定试试这个：stackoverflow.com/questions/52290322/…
ngModel 的问题是：看起来您在与 formControlName 相同的表单字段上使用 ngModel。 Angular v6 中已弃用对使用 ngModel 输入属性和 ngModelChange 事件和响应式表单指令的支持，并将在 Angular v7 中删除。有关这方面的更多信息，请在此处查看我们的 API 文档：angular.io/api/forms/FormControlName#use-with-ngmodel
只要在后台创建formGroupfirstCtrl: ['Foo']的时候设置它的默认值，或者在得到需要的数据后更新它的值。 myForm.get('firstCtrl').setValue('Foo');.
所以你是说如果你使用有棱角的材料，你会失去双向绑定而不需要额外的编码？

标签： angular forms input angular-material two-way-binding

【解决方案1】：

value 的输入是预定义的 html 属性，不会发出更改。
另一方面，mat-select 是一个自定义的角度组件，他们将value 同时声明为输入和输出，如下所示：

@Input('value') input: any;
@Output('value') output: EventEmitter;

这就是为什么您可以以两种方式绑定它。
因此，在您的情况下，您可以使用 ngModel 或执行以下操作：

<input (change)="inputValue = $event.target.value" [value]="inputValue"/>

【讨论】：

以这种方式，它将“未定义”表达式作为表单元素中的默认值。所以我必须先初始化它。是否可以在不初始化的情况下绑定它
当然需要初始化值inputValue: string = '';
然而它不是 imo 的理想解决方案，但我现在必须选择这个。顺便谢谢。

【解决方案2】：

我想到不使用[ngModel] 的唯一方法是使用(keyup)。我会尝试将您的输入更改为以下内容：

<mat-form-field class="col-md-4">
          <input matInput placeholder="First name" formControlName="firstCtrl" (keyup)="onKey($event)">
          <mat-error>First name can not be left blank</mat-error>
        </mat-form-field>

然后添加一个函数

onKey(event: any) { // without type info
    formData.gender = event.target.value;
  }

【讨论】：

谢谢。这个解决方案在我脑海中。但正如你所说，这是我认为的最后一个选择。