Question

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

Answer 1

输入的

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

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

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

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

Answer 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;
  }

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

2 个答案: