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()

并且您的模型“person”始终保持“name”属性的当前值

编辑：使用一些属性定义您的模型：

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 :)

使用这两个元素，您可以使用模型值“填充”表单：

this.form.setValue(this.person);