Question

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

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()中，我已经打印了这些字段的值，并且可以正常工作了，但是接下来，当我尝试使用form将值绑定到setValue时，或patchValue，它根本就不会使用从form获取的值来更新service。

这方面的更多代码

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还是很陌生，我不确定在这里我做错了什么。

Answer 1

这对我来说很好，除了您要设置路径值的地方：

doc.name.text看起来不正确。您应该尝试

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

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

设置路径值不会由于内部的if检查而抛出任何错误 Object.keys循环。有人可能会说这是一个安全的$ app，只是在开玩笑。它允许您设置存在的值，并且将忽略那些当前的迭代控件中不存在

另一方面，setValue是一种“更安全”的处理方式。不存在的道具会出错。

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

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

看看我为您here做的stackBlitz：

Answer 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>

一切都会好的

反应性表单字段不会使用setValue或patchValue

2 个答案: