Angular Typescript - 使用FormGroup中的现有值

Question

在我的应用中，我有一个列表和一个用于更改列表中值的表单。

我的表单中的输入字段如下所示：

<input matInput id="nameInput" formControlName="name" value="{{person.name}}">

我的列表显示如下数据：

 <h3 mat-subheader>Name</h3>
      <mat-list-item> {{person.name}} </mat-list-item>

如您所见，我在表单输入字段中使用{{person.name}}作为值。这意味着现有值应该用作输入字段中的值，并且实际上在表单输入字段中正确显示。 除非它没有意识到该字段中已经有输入，我知道这导致我的表单禁用了sumbit按钮，除非输入字段中有超过3个字符。如何告诉我的表单使用已存在的{{person.name}}及其所有字符的值？

Answer 1

如果我理解正确，我认为你应该使用setValue或patchValue。 所以，如果你有某种形式，例如：

this.form = this.fb.group({
     name: ['', Validators.required],
});

您可以通过调用

来设置它的值

this.form.patchValue(this.person); //or setValue()

和你的模特＆＃34;人＆＃34;始终保持＆＃34; name＆＃34;的当前值属性

修改 使用一些属性定义模型：

export class Person {
  name: string;
  surname: string;
}

然后创建一个表单和新人：

this.form = this.fb.group({
     name: ['', Validators.required],
     surname: ['', Validators.required],
});
const person = new Person;
person.name = "John";
person.surname = "Doe";
//or get your model from db - thats for you to decide :)

使用这两个元素，您可以“填充”＃34;您的表单带有型号值：

this.form.setValue(this.person);