我试图在不使用ngModel的情况下将表单项绑定到对象。但它没有用。
我尝试使用[(value)] =“”属性。但是,元素的初始值更改为“undefined”。
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>
输入的value
是预定义的html属性,不会发出更改。
另一方面,mat-select
是一个自定义角度组件,他们同时将value
声明为输入和输出,如下所示:
@Input('value') input: any;
@Output('value') output: EventEmitter;
这就是为什么你可以用两种方式绑定它。
所以在你的情况下,你要么使用ngModel
或做这样的事情:
<input (change)="inputValue = $event.target.value" [value]="inputValue"/>
在没有[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;
}