如何从反应形式的其他 formControl 值自动更新 formControl 值 angular 2？

Question

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{
  itemName:"name",
  itemRate:1000,...}

我如何使用项目对象的属性并修补我的 initItem() 方法属性中的值？我的场景是这样的，当用户 select 来自下拉列表的值时，项目将得到更新并且我想显示从其他 formControls 中的项目获得的值。示例：

<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 输入框的值。

Answer 1

我假设您正在尝试根据 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);
}

Answer 2

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

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

如何从反应形式的其他 formControl 值自动更新 formControl 值 angular 2？

How to update formControl values automatically from other formControl values in reactive forms angular 2?

arrays

autocomplete

angular-material2

angular

angular-reactive-forms