Как назначить динамический c массив объектов в formgroup, используя angular8 - PullRequest
Новая
       28

Как назначить динамический c массив объектов в formgroup, используя angular8

0 голосов
/ 23 февраля 2020

Привет, я получаю массив объектов от попадания API, этот массив объектов должен быть назначен для formGroup. Я пытался использовать привязку formGroup, но он обнаруживает значения true / false, но он не дает мне измененные значения true / false в массиве объектов, вместо этого дает мне только true / false, а также у меня есть поле ввода даты в другом массиве, он также не обнаружит истинное / ложное значение или измененное значение. Если код, который я написал, неверен, то, пожалуйста, исправьте меня и помогите мне написать эффективным способом.

Помощь оценена.

DEMO: DEMO

TS: 

 private settingsInfoForm() {
    if (!this.agentDetailsList) {
      // Add
      this.agentSettingsInfoForm = this.FB.group({
        agentToogles: this.FB.array(this.detailsToggle.map(x=> x.boolValue)),
        restrictionsInfo:this.FB.array(this.Restrictions.map(x=>x.boolValue))
      });
    } else {
      // Edit
      if (this.agentDetailsList) {
       this.detailsToggle = this.agentDetailsList
       this.agentSettingsInfoForm = this.FB.group({
          agentToogles: this.FB.array(this.detailsToggle.map(x=>x.boolValue)),
           restrictionsInfo:this.FB.array(this.Restrictions.map(x=>x.boolValue))
      })
      }
      this.agentSettingsInfoForm.valueChanges.subscribe(data => {
          this.formEdit = true;
          console.log('agentSettingsInfoForm', this.formEdit)
        })
      }
    }

HTML: 

<form [formGroup]= "agentSettingsInfoForm">
<div class="row row-cols-2" formGroupName="agentToogles">
              <div class="col" *ngFor="let toggleValue of detailsToggle;let i = index">
                <div class="custom-control custom-switch mb-3">
                    <input type="checkbox" [formControlName]="i" id="{{toggleValue.id}}" > 
                  <label class="custom-control-label" for="{{toggleValue.id}}">{{toggleValue.label}}</label>
                </div>
              </div>
            </div>


          <div class="col-6 {{isReadOnly ? 'link-disabled' : ''}}"
            *ngFor="let restrictValue of Restrictions;let i = index" formGroupName="restrictionsInfo">
            <div class="custom-control custom-switch">
              <input type="checkbox" class="custom-control-input" id="{{restrictValue.id}}"
              [(ngModel)]="restrictValue.boolValue" [ngModelOptions]="{standalone: true}"
                >
              <label class="custom-control-label" for="{{restrictValue.id}}">{{restrictValue.label}}</label>
            </div>
            <div class="form-group">
              <input type="text" class="form-control restrictionDate" id="{{restrictValue.id}}" placeholder="MM/DD/YYYY HH:MM AM/PM"
                [disabled]="!restrictValue.boolValue" [(ngModel)]="restrictValue.datetime" (click)="dateRestriction($event, i)" 
                [ngModelOptions]="{standalone: true}" >
            </div>
          </div>

</form>

1 Ответ

1 голос
/ 23 февраля 2020

Вы не используете [(ngModel)] при использовании построителя форм. Вместо этого вы должны использовать директиву formControlName. Когда вы используете массивы построителя форм, вы также должны указывать директиву * 1003. *

Кроме того, вам нужно передать массив элементов управления в построитель форм вместо массива значений.

Я создам простой пример на основе вашего кода, чтобы показать вам, как вы применяете эту технику.

Если вы настроите форму в своем компоненте следующим образом:

component.ts 

ngOnInit() {
  this.values = ['', '', ''];

  this.form = this.formBuilder.group({
    values: this.formBuilder.array(
      // this is an array of controls - NOT values
      this.values.map(x => this.formBuilder.control(x))
    )
  });
}

Вы можете использовать директивы в HTML следующим образом:

компонент. html

<form (submit)="onSubmit()">
  <fieldset [formGroup]="form">
    <div formArrayName="values">
      <div *ngFor="let value of values;let i = index">
        <input [formControlName]="i" />
      </div>
    </div>
    <button>Submit</button>
  </fieldset>
</form>

Обратите внимание, как я обернул элементы управления формой с formArrayName и установите formControlName в индекс массива.

DEMO: https://stackblitz.com/edit/angular-lbo6qn

Несколько элементов управления формы в массиве

Если Вы хотите создать несколько элементов управления для каждого элемента в массиве формы, вам нужно настроить форму, чтобы отразить это. Создайте элемент управления формы для каждого свойства в вашем массиве форм. 

this.form = this.FB.group({
  array: this.FB.array(
    this.values.map(x => this.FB.group({
      boolValue: this.FB.control(x.boolValue),
      label: this.FB.control(x.label)
    }))
  )
});

Ваша структура HTML будет соответствовать структуре вашей формы: 

<form [formGroup]="form" (submit)="onSubmit()">
  <div formArrayName="array">
    <div *ngFor="let value of values;let i = index">
      <div [formGroupName]="i">        
        <input type="checkbox" formControlName="boolValue" /> 
        <input type="text" formControlName="label" />
      </div>
    </div>
  </div>      
   <button>Save</button>
</form>

После этого вы сможете получить доступ к обновленным значениям при отправке. , Опять же, ваш запрос соответствует объявленной структуре. 

onSubmit() {
  this.form.get('array').value.forEach((formGroup: FormGroup, i: number) => {
    this.values[i].boolValue = formGroup['boolValue'];
    this.values[i].label = formGroup['label'];
  });
}

Ключевым моментом здесь является то, что структура директив формы в вашем HTML должна соответствовать структуре групп, массивов и элементов управления формой в вашей форме.

Развернутая демонстрация: https://stackblitz.com/edit/angular-xopwoz

Это всего лишь пример того, как вы применяете концепцию, а не конкретное c решение вашей проблемы. Ваша проблема использует поля даты и jQuery. Вопрос о том, как создавать поля ввода datepicker в Angular, находится вне области видимости и широко задается в inte rnet. Для вас не должно быть большой проблемой применять мои методы к вашей базе кода.

...