angular - 如何在不使用 Angular Material 中的 ngModel 的情况下设置双向绑定(bind)

Question

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

我尝试使用 [(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>

Answer 1

输入的

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

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

这就是为什么你可以用两种方式绑定(bind)它。
所以在你的情况下，你要么使用 ngModel 要么做这样的事情:

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