如何将反应角形式作为双向数据绑定绑定到对象？

Question

我有角形式：

profileForm = new FormGroup({
 firstName: new FormControl(''),
 lastName: new FormControl(''),
});

<form [formGroup]="profileForm">

  <label>
    First Name:
    <input type="text" formControlName="firstName">
  </label>

  <label>
    Last Name:
    <input type="text" formControlName="lastName">
  </label>

</form>

我也有一个数据对象：

const person = { firstName: 'firstbla', lastName: 'lastbla' }

我想将对象绑定到表单中。

但是当我form.firstName更改时，它也反映出person.firstName的更改。 （双向数据绑定）。

可以以角反应形式进行吗？ 我尝试使用patchValue，但它不会改变人。

Answer 1

patchValue更新表单中的值。

反应形式还可以通过两种方式进行绑定。 无论您对表单进行什么更改，都可以获取值。 在这种情况下，您可以使用对象值初始化表单。

const person = { firstName: 'firstbla', lastName: 'lastbla' }

profileForm = new FormGroup({
 firstName: new FormControl(person.firstName),
 lastName: new FormControl(person.lastName),
});

每当您对表单进行任何更改时，在提交之前，您都可以致电：

const formValues = profileForm.value;
const firstName = formValues.firstName;
const lastName = formValues.lastName;

Answer 2

您可以使用ValueChanges。 表单初始化将是这样，

profileForm = new FormGroup({
 firstName: new FormControl(person && person.firstName ? person.firstName : ''),
 lastName: new FormControl(person && person.lastName ? person.lastName : ''),
});

在表单初始化方法之后，您必须在ngOnInit()创建一个新方法，

detectValueChange = () => {
this.profileForm.valueChanges.subscribe((response) => {
      person.firstName = response.firstName;
      person.lastName = response.lastName;
    })
};

这样，您的表单和对象的值都将在同一页面上。