“ [值]”未以反應形式設置控制值

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'中的值復制/復制到'PostalAddressLine1' [value] 。

在UI上，這可以按預期工作，但是一旦提交表單，“ PostalAddressLine1”的值將為空。

這是我從提交的表單中檢索值的方法：

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

不知道為什么我會遇到這種現象。 我應該怎么做？

Answer 1

Monsterthie，您不能同時使用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;
}

注意：我包括一個典型的構造，以在組件被破壞時刪除訂閱