“[value]”未以反应形式设置控制值 Angular

Question

我有以下场景：

<input #physicalAddress1 type="text" formControlName="PhysicalAddressLine1" />

<tfg-toggle #physicalAsPostal 
            formControlName="PhysicalAsPostal" 
            [onText]="'Yes'" 
            [offText]="'No'"></tfg-toggle>

<input type="text" 
       formControlName="PostalAddressLine1" 
       [value]="physicalAsPostal.value === true ? physicalAddress1.value : ''" />

从上面可以看出，在'PhysicalAddressLine1'上设置了一个template reference variable，如果选择了'PhysicalAsPostal'（true），那么'PhysicalAddressLine1'的值应该是duplicated/copied 变成 'PostalAddressLine1' [value].

在 UI 上，这按预期工作，但一旦提交表单，'PostalAddressLine1' 的值为空。

以下是我如何从提交的表单中检索值：

let provider: Provider = Object.assign({}, this.providerFormGroup.value);
console.log(provider.PostalAddressLine1); // Empty string: ""

不确定我为什么会遇到这种情况。我应该怎么做？

Answer 1

怪物，你不能同时使用 formControlName 和 [value]。您需要更改目录 PhysicalAddressLine1.controls.PostalAddressLine1.value。创建表单后，您可以在 .ts 中使用值更改。有些人喜欢：(*)我想象一个实现 OnInit 和 OnDestroy

的组件

alive=true; //<--declare a variable
ngOnInit(){
  this.form=this.fb.group(...)
  this.form.controls.PhysicalAddressLine1.valueChanges
     .pipe(takeWhile(()=>this.alive))
     .subscribe(res=>{
       this.form.controls.PostalAddressLine1.setValue(res?res:'')
     })
}
ngOnDestroy()
{
   this.alive=false;
}

注意：我包含了一个典型的构造，用于在组件被销毁时删除订阅

“[value]”未以反应形式设置控制值 Angular

'[value]' not setting control value in reactive form Angular

typescript

angular

angular-reactive-forms