Angular ссылка FormControl на поле объекта

Question

Мой код содержит FormGroup и объект с примерно одинаковыми полями:

Модель:

class User {
  firstName: string,
  lastName: string,
  email: string,
}

Компонент:

/** User object, to easily manipulate */
user = new User();

/** User FormGroup, to use on form fields */
userForm = new FormGroup({
  firstName: new FormControl(''),
  lastName: new FormControl(''),
  email: new FormControl(''),
})

My вопрос в том, есть ли хороший способ связать поля объекта с элементом управления формой? Поэтому мне нужно установить только одно из них и не заботиться о том, что другой может быть устаревшим.

Я думал установить formControlName и ngModel в одном поле, но это устарело с Angular 6.

Answer 1

Вам нужно будет исправить данные формы для объекта и наоборот.

Вы можете создать такую ​​форму

<form class="form" [formGroup]="userForm" (ngSubmit)="userForm.valid && onSubmit()"></form>

И в .ts

Для исправления значения в форме

this.userForm.patchValue(this.user);

И From the from в объект

OnSubmit(){
 this.user= Object.assign(this.user, this.userForm.value);
}

Answer 2

Согласно Angular Документация , вы можете связать их с помощью директивы [ngModel]. Например:

<input type="text" class="form-control" id="name" required [(ngModel)]="user.firstName" name="firstName">
<input type="text" class="form-control" id="name" required [(ngModel)]="user.lastName" name="lastName">
<input type="text" class="form-control" id="name" required [(ngModel)]="user.email" name="email">