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'{ {1}}。

在UI上，此操作可以按预期工作，但是一旦提交表单，“ PostalAddressLine1”的值为空。

这是我从提交的表单中检索值的方法：

[value]

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

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;
}

注意：我包括一个典型的构造，用于在组件被破坏时删除订阅

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

1 个答案: