Reactive Form valueChanges наблюдаемый сбрасывает значение формы - PullRequest
Новая
       20

Reactive Form valueChanges наблюдаемый сбрасывает значение формы

2 голосов
/ 06 мая 2019

У меня динамическая реактивная форма. Одна часть создается путем связывания директив FormGroup и FormControl в Html. Кроме того, есть событие click для добавления других значений к значению формы программным способом. Проблема заключается в том, что при подписке на наблюдаемую this.form.valueChanges значение обратного вызова (лямбда-выражение) включает значение формы, добавляемое в функцию AddToList, , но оно пустое , хотя оно и имело значение до. ValueChanges подписывается всякий раз, когда я изменяю значение в элементе управления select. Не могу понять, почему это происходит. 

<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 сработала из-за пределов компонента и имеет необходимые значения для заполнения формы.

Ответы [ 2 ]

1 голос
/ 07 мая 2019

Нашел, где проблема была - я пропустил директиву FormArrayName в ul, куда были добавлены элементы: 

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

Яdo: 

this.form.value[field].push(value);

Проблема заключалась в том, что form.value [field] ссылался на item.dataList, а не управлялся отдельно.

0 голосов
/ 06 мая 2019

Удалите значение изменения подписки из метода 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);
     });

}

...