反应式表单字段未使用 setValue 或 patchValue 更新

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，它只是不使用从 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 的新手，我不确定我做错了什么。

Answer 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 throws no errors due to the if check inside the Object.keys loop. Some might say it’s a safe $apply, just kidding. It’ll allow you to set values that exist and it will ignore ones that do not exist in the current iterated control

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

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

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

看看我为你做的 stackBlitz here:

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 更新

Reactive form fields are not updated with setValue or patchValue

typescript

angular

angular-reactive-forms

angular6