反应式表单字段不使用 setValue 或 patchValue 更新答案

【问题标题】：Reactive form fields are not updated with setValue or patchValue反应式表单字段不使用 setValue 或 patchValue 更新
【发布时间】：2019-04-06 18:51:49
【问题描述】：

以下是我的一段代码，为了简洁起见，我已经简化了代码。

ngOnInit() {
    //intialize form fields 
    this.form = this.builder.group({
      name: '',
      age: '',
      location: '',
    });

    //Call to the service

    this.dataService.getDetails().subscribe(
      (data) => {
        this.dataArray = data;
        if (this.dataArray[this.count].status === 'OK') {
          let docs = {};
          this.someService.getDocs(this.dataArray[this.count].id).subscribe(
            (data) => {
              docs = data;
              console.log("docs: ", docs);
              this.setFormValues(docs);//set form values
            },
            (err) => {
              console.log(err);
              console.log('Something happened');
            }
          );
        }
      },
      (err) => {
        console.log(err);
        console.log('Something happened',err);
      }
    );
  }

现在在setFormValues() 中，我已经打印了字段的值，并且到目前为止它工作正常，但是接下来当我尝试使用setValue 或patchValue 将值绑定到form 时，它根本不会用从service 获取的值更新form。

这方面的更多代码

public setFormValues(doc: DocsDTO) {
    if (doc!= null) {
      console.log("setFormValues", doc);
      this.form.patchValue({
        name: doc.name == null ? '' : doc.name.text,
        age: doc.age == null ? '' : doc.age.text,
        location: doc.location == null ? '' : doc.location.text,
      })
    }
  }

这是我的form 的样子

<form [formGroup]="form">
          <mat-card-content>
            <input placeholder="name" [formControl]="name" id="name"
              ngDefaultControl></input>
            <input placeholder="age" [formControl]="age" id="age" ngDefaultControl></input>
          </mat-card-content>
        </mat-card>
</form>

注意：当我不使用FormBuilder 并使用FormControl 初始化表单字段并使用this.name.setValue() 设置表单值时，它可以正常工作。

我对 angular 很陌生，我不确定我在这里做错了什么。

【问题讨论】：

您的代码 ts 代码是正确的，您是否在控制台中遇到任何错误？我假设，您的 JSON 数据可能存在问题。
没有错误。我也尝试过硬编码这些值。
我已经根据您的场景在 stackblitz 上创建了一个示例应用程序，它运行良好，请查看此链接 stackblitz.com/edit/… 并告诉我
我认为问题在于您将 html 与 formcontrol 绑定并在 formgroup 中设置了一个值，这就是您没有在控件中获取值的原因。请检查 stackblitz 示例 html 代码。

标签： angular typescript angular6 angular-reactive-forms

【解决方案1】：

这对我来说看起来不错，除了你设置路径值的地方：

doc.name.text 对我来说看起来不正确。你应该试试

this.form.patchValue({
    name: !!doc.name ? doc.name : '',
    age: !!doc.age ? doc.age: '',
    location: !!doc.location ? doc.location : '',
  })

这将更新我们的 FormControl 实例，很简单！另外我认为我们不需要这里的条件设置：

set pathvalue 不会因为 if 检查而引发错误 Object.keys 循环。有人可能会说这是一个安全的 $apply，只是在开玩笑。它允许你设置存在的值，它会忽略那些存在的值当前迭代控件中不存在

另一方面，setValue 是一种“更安全”的做事方式。不存在的 props 会报错。

如果您正确添加 formControlName，它将起作用：

 <input placeholder="name" formControlName="name" id="name" ngDefaultControl>
 <input placeholder="age" formControlName="age" id="age" ngDefaultControl>

看看我为你做的 stackBlitz here：

【讨论】：

问题不在于doc 对象，因为它在那里有嵌套值，因为我使用了doc.name.text，它返回了所需的值，只是它们没有反映在表单中。如果我不使用 FormBuilder 方法并专门在全局级别初始化 FormControls，则同样有效。即使我尝试设置硬编码值，它们也不起作用。
问题出在你使用formControlName的方式上：应该是：
@Sajjad，如果它适合您，请接受答案。谢谢！
是的，我不得不使用formControlName，而不是formControl。

【解决方案2】：

问题是在您的 html 中，输入有“formControl”，因此在这种情况下将 formGroup 与表单绑定的正确方法是使用 [formControlName] 指令。

将您的 html 更改为：

<form [formGroup]="form">
          <mat-card-content>
            <input placeholder="name" [formControlName]="'name'" id="name"
              ngDefaultControl></input>
            <input placeholder="age" [formControlName]="'age'" id="age" ngDefaultControl></input>
          </mat-card-content>
        </mat-card>
</form>

一切都会好起来的

【讨论】：