Angular FormGroup 忽略我的标准值

Question

我的表单中已经有一些来自我的网络 api 的标准值。问题是我的 FromGroup 忽略它们并将所有值设置为 null。只有当我自己在输入中输入一些内容时，值才不为空。因此，如果我尝试更新用户，它将重置整个用户。

我的表格：

<form [formGroup]="persoForm" (ngSubmit)="onSubmit()">

            <div id="firma">
                <mat-form-field appearance="standard" id="firm" floatLabel="always">
                    <mat-label> Firmenbez.:</mat-label>
                    <input matInput type="text" name="firm" formControlName="firmenBez" [value]="person.firmenbezeichnung"/>
                </mat-form-field>
            </div>
</form>

TS

persoForm = new FormGroup({
    firmenBez: new FormControl(),
  })

onSubmit(){ //currently only there to check if the values are still null
      
      console.log(this.persoForm.getRawValue());
}

Answer 1

input 应该从一个来源获取值，但是您在代码中使用了两个来源：一个是 formControlName，另一个是 value .

在Angular Reactive Form中，你必须保留没有value的formControlName，并根据你的API数据处理它的值：

如果你在初始化FormGroup之前获取数据，那么你必须像下面这样初始化它：

// init the form-group when you get the data from the API like the following:
this.personForm = new FormGroup({
  firmenBez: new FormControl(this.person.firmenbezeichnung),
});

但是如果你在初始化 FormGroup 之后获取日期，你可以保持初始化不变，然后像下面这样修补来自 API 的数据：

onDataReceived(person) {
  this.personForm.patchValue({
    firmenBez: person.firmenbezeichnung,
  });
}

Angular FormGroup 忽略我的标准值

Angular FormGroup ignores my standard value

typescript

angular

angular-forms