Question

我有一个动态的反应形式。一部分是通过在HTML中绑定FormGroup和FormControl指令来构建的。此外，还有一个click事件，用于以编程方式将其他值添加到表单值。问题在于，当订阅this.form.valueChanges可观察时，回调值（lambda表达式）包括在AddToList函数中添加的表单值，但为空，尽管它以前有价值每当我在select控件中更改值时，就将订阅valueChanges。无法理解为什么会这样。

<form *ngIf="form" >
<div *ngFor="let col of Colomns">
    <ul>
        <li *ngFor="let val of col.dataList; let i=index">
          <span>{{val}}</span>
          <a button type="button" (click)="deleteFromList(i, col.field, $event)">
          </a>
        </li>
    </ul>
</div>
<!--below is the part of binding values using the directives-->
  <div *ngFor="let col of Colomns; let i = index">
    <div [formGroup]="form">
      <select [id]="col.field" [formControlName]="col.field" >
        <option [value]=''></option>
        <option *ngFor="let sys of col.data" [value]="sys.Code">{{sys.Value}}</option>
      </select>
  <!-- this is a textbox with an AddToList button-->
      <div>
       <input class="input" [id]="col.field" type="text"  #texttosearch>
       <button class="btnAddList" (click)="AddToList(texttosearch.value, 
        col.field, $event)">
       </button>
      </div>
    </div>
</div>

这是组件所需的代码：

export class dynamicReactiveFrom
{
    form: FormGroup;
    advanceCols: AdvanceColumnBase<any>[];
    constructor(private fb: FormBuilder) { }

    initAdvancedSearch(arr:AdvanceColumnBase<any>[]) 
    {
         this.advanceCols = arr;
         let group: any = {};
         arr.forEach(col =>
         if (<some condition for the selected Items>)
         {
            group[col.field] = new FormControl(col.value || '');
         }
         else/*This is for the items which were added using the AddToList function*/
         {
            group[col.field] = this.fb.array([this.fb.control('')]);
         }
         );
         this.form = new FormGroup(group);


         this.form.valueChanges.subscribe(values => {
         /*the value that was set in the AddToList function is now reset, in 
         the values callback*/
         doSeomthing(values);
     });
   }

   AddToList(value: string, field: string, event) 
   {
       event.preventDefault();
       let selectedField = this.advanceCols.find( x => x.field === field);
       if(selectedField) 
       {
         this.form.value[field] = item.dataList;
       }
   }
 }

initAdvancedSearch函数从组件外部触发，并具有填充表单所需的值。

Answer 1

找到问题所在了-我在添加项目的ul中缺少FormArrayName指令：

<!DOCTYPE html>
<html>

  <head>
    <title>JavaScript</title>
    <script type="text/javascript">
      function sum() {
        var val1 = document.getElementById('val1').value;
        var val2 = document.getElementById('val2').value;
        var sum = val1 + val1;
        document.getElementById('total').value = sum;
      }

    </script>
  </head>

  <body>
    <input type="text" name="val1"><br><br>
    <input type="text" name="val2"><br><br>
    <input disabled name="total" value=""><br><br>
    <button type="button" onclick="sum()" name="btn">Add</button>
  </body>

</html>

，而不是：

<div *ngFor="let col of Colomns">
    <ul [formArrayName] = "col.<property with unique value - name or ID>">
        <li *ngFor="let val of col.dataList; let i=index">
         <span>{{val}}</span>
         <a button type="button" (click)="deleteFromList(i, col.field, $event)">
        </a>
       </li>
  </ul>
</div>

我在做

this.form.value[field] = item.dataList;

问题在于，form.value [field]是由item.dataList引用的，而不是被单独管理的。

Answer 2

从initAdvancedSearch方法中删除值更改订阅，并在组件的OnInit上订阅它。首先实现OnInit接口：

export class dynamicReactiveFrom implement OnInit

，然后提供ngOnInint的实现：

public ngOnInit() {
   this.form.valueChanges.subscribe(values => {
         /*the value that was set in the AddToList function is now reset, in 
         the values callback*/
         doSeomthing(values);
     });

}

响应式表单值更改可观察到的重置表单值

2 个答案: