如何从反应形式角度2中的其他formControl值自动更新formControl值？答案

【问题标题】：How to update formControl values automatically from other formControl values in reactive forms angular 2?如何从反应形式角度2中的其他formControl值自动更新formControl值？
【发布时间】：2020-08-05 19:44:30
【问题描述】：

this.myForm = fb.group({
         name: ['', [Validators.required, Validators.minLength(2)]],
         date: ['', [Validators.required, Validators.minLength(2)]],
         address: ['', [Validators.required, Validators.minLength(2)]],
        ,
         items: fb.array([
             this.initItem(),
         ])
     });

initItem() {
  return this.fb.group({
      item: [''],
      itemType: [''],
      amount: [''],
      presentRate:this.myForm,
      total:['']
  });

提交表单时，这个item属性会被一个对象存储。示例对象：

item{
  itemName:"name",
  itemRate:1000,...}

如何使用项目对象的属性并修补我的 initItem() 方法属性中的值？我的情况是，当用户从下拉列表中选择一个值时，项目将得到更新，我想显示这些值从其他formControls中的item获取。示例：

<div *ngFor="let item of myForm.controls.items.controls; let i=index">
           <div [formGroupName]="i">
             <md2-autocomplete [items]="products"
                       item-text="product"
                       (change)="handleChange($event)"
                       placeholder="Product purchased"
                       formControlName="item"
                       >
             </md2-autocomplete>
             <md-input-container >
               <input md-input placeholder="Present rate" [value]="presentRate" formControlName="presentRate"  >
             </md-input-container>

我想自动更新 presentRate 输入框的值。

【问题讨论】：

标签： arrays angular autocomplete angular-material2 angular-reactive-forms

【解决方案1】：

您可以订阅一个表单控件的valueChanges，并在另一个表单控件上调用setValue。

this.myForm.get('myControlName').valueChanges
.subscribe(val => 
  this.myForm.get('myOtherControlName').setValue(val)
);

【讨论】：

感谢您的回复。但是如何访问 formArray 中的 formControl？
this.myForm.get('myOtherControlName.3.inArray') 获取myOtherControlName 数组中的第二个inArray 控制元素。
initItem() { return this.fb.group({ item: [''], itemType: [''], amount: [''], presentRate:this.this.myForm.get('myOtherControlName.3.inArray'), total:[''] }); 对吗？
我想你的意思是.setValue(val)，因为updateValueAndValidity 不是那样工作的。
@GoodNightNerdPride 从那时起这很可能发生了变化。那时的表格还不是很稳定。

【解决方案2】：

我假设您正在尝试根据md2-autocomplete 中的选定值更新每个presentRate 的值。如果我是正确的，以下应该可以工作：

模板：

(change)="handleChange($event, i)"

组件：

handleChange($event: any, i: index) {
  const control: AbstractControl = myForm.get(`items.${i}.presentRate`);
  let newVal: any;

  if ($event.value) {
    newVal = $event.value.rate;
  } else {
    newVal = '';
  }

  control.patchValue(newVal);
}

【讨论】：

handleChange($event: any, i: index) { const control: AbstractControl = this.myForm.get(items.${i}.presentRate); control.patchValue($event.value.rate); 我确实喜欢这个并且它有效，但是在从下拉列表中更改值时出现错误。
这是 md2-autocomplete 的问题吗？
好吧，在尝试访问 any property 之前，您必须检查该值是否有效。发送console.log($event) 看看发生了什么。
是的，它的工作！ if ($event.value) { control.patchValue($event.value.rate); } else control.patchValue('');
如果event.value为null，我添加了一个else条件来清除该值。是正确的方式吗？