Я пытаюсь привязать элемент формы к объекту без использования ngModel. Но это не работает.

Я пробовал использовать атрибут [(значение)] = "". Однако начальное значение элемента изменилось на «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>
2
radeveloper 17 Сен 2018 в 15:47

2 ответа

Лучший ответ

value входных данных является предопределенным атрибутом html и не вызывает изменений.
С другой стороны, mat-select - это пользовательский компонент angular, в котором они объявили value как ввод и вывод одновременно, примерно так:

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

Вот почему вы можете связать его обоими способами.
так что в вашем случае вы либо работаете с ngModel, либо делаете что-то вроде этого:

<input (change)="inputValue = $event.target.value" [value]="inputValue"/>
2
SlimenTN 17 Сен 2018 в 12:57

Единственный способ сделать это без [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;
  }
2
hjbello 17 Сен 2018 в 14:26