Добавление массива объектов с помощью компоновщика форм и угловых материалов - PullRequest
Новая
       18

Добавление массива объектов с помощью компоновщика форм и угловых материалов

0 голосов
/ 16 февраля 2019

Я пытаюсь создать массив объектов тегов, используя чипы угловых материалов.

Мне очень трудно понять, как поместить эти объекты тегов в массив в моем конструкторе форм.

Это должно быть просто, так как у меня есть массив с именем selected, который содержит объекты тегов, и я просто хочу добавить это в свой конструктор форм.

Вот мой HTML: 

<form class="flex col" (ngSubmit)="onSubmit()" [formGroup]="registerForm">
    <mat-form-field class="chip-container">
            <mat-chip-list #chipList>
              <mat-chip *ngFor="let tag of selected" [removable]="removable" (removed)="onRemove(tag)">
                {{tag.Text}}
                <i matChipRemove *ngIf="removable" class="fal fa-times-circle"></i>
              </mat-chip>
              <input placeholder="{{placeholder}}" [matChipInputFor]="chipList"
                [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="addOnBlur"
                (matChipInputTokenEnd)="add($event)" disabled>
            </mat-chip-list>
          </mat-form-field>

<div class="available-chips-container">
        <mat-chip-list *ngIf="!hideAvailable">
          <mat-chip *ngFor="let tag of tags" [selectable]="selectable" (click)="onSelect(tag)">
            {{tag.Text}}
          </mat-chip>
        </mat-chip-list>
        <p class="danger-text" *ngIf="hideAvailable">Great! You have selected the maximum number of tags.</p>
      </div>
</form>

Вот мой код компонента: 

  hideAvailable: boolean;
  selectable = true;
  removable = true;
  placeholder = 'Select a tag below...';
  selected: ITag[] = [];
  tags: ITag[];

  this.registerForm = this.fb.group({
      Email: new FormControl('', [Validators.required, Validators.email]),
      Password: new FormControl('', Validators.required),
      ConfirmPassword: new FormControl('', Validators.required),
      Firstname: new FormControl('', Validators.required),
      Lastname: new FormControl('', Validators.required),
      DateOfBirth: new FormControl('', Validators.required),
      Tags: this.selected
  });

onSelect(tag: ITag) {
  this.selected.push(tag);
}

onRemove(tag: ITag): void {
  this.tags.push(tag);
}

onSubmit() {
  console.log(this.registerForm.value)
}

На данный момент проблема в том, что, хотя я помещаю теги в выбранный массив, и они помещаются в порядке, массив тегов registerForm.valueвсегда пусто при отправке формы с помощью onSubmit ().

Пожалуйста, дайте мне знать, если вам нужен дополнительный код.

Спасибо

Ответы [ 2 ]

0 голосов
/ 16 февраля 2019

selected представляется просто массивом JS, а не FormArray.Вам нужно сообщить angular, что выбрано значение FormArray и, в зависимости от случая, либо выдвинуть элементы управления формы, либо сформировать группы в этот массив.Я думаю, вы хотите, чтобы в этом случае сформировались группы.Поэтому объявляйте массив форм при создании формы: 

constructor(private fb: FormBuilder) {
  this.registerForm = this.fb.group({
    Email: ['', [Validators.required, Validators.email]],
    // ...
    Tags: this.fb.array([])
  });
}

Затем при добавлении мы помещаем группы форм в formarray, определяем метод получения для formarray для более легкого использования в функциях и шаблонах. 

get tagsArr() {
  return this.registerForm.get('Tags') as FormArray;
}

Затем добавьте и удалите: 

onSelect(tag: any) {
  /** if you only want formcontrol with a single value use: 
      this.tagsArr.push(tag.Text), else do below
  **/
  this.tagsArr.push(
    this.fb.group({
      Text: tag.Text
      // other props
    })
  )
}

onRemove(index): void {
  this.tagsArr.removeAt(index);
}

Затем в шаблоне мы повторяем значения элемента управления формы и отображения: 

<mat-chip-list #chipList formArrayName="Tags">
  <mat-chip *ngFor="let tag of tagsArr.controls; let i = index" 
                    [removable]="true" (removed)="onRemove(i)" >
    {{tag.get('Text').value}}
    <i matChipRemove *ngIf="removable" class="fal fa-times-circle"></i>
  </mat-chip>
</mat-chip-list>

StackBlitz пример

0 голосов
/ 16 февраля 2019

Вы используете fb как право FormBuilder.

FormControl - это синтаксис, который вы используете, когда делаете это «сложным путем».

fb избегает этого!

Примеры ниже из документов :

Трудный путь: 

profileForm = new FormGroup({
  firstName: new FormControl(''),
  lastName: new FormControl(''),
  address: new FormGroup({
    street: new FormControl(''),
    city: new FormControl(''),
    state: new FormControl(''),
    zip: new FormControl('')
  })
});

против

Простой способ: 

profileForm = this.fb.group({
  firstName: [''],
  lastName: [''],
  address: this.fb.group({
    street: [''],
    city: [''],
    state: [''],
    zip: ['']
  }),
});

Это простой пример, который у меня есть в одном из моих ионных приложений, вызываемых во время фазы инициализации.

т.е. вы удалили все new FormControl( ... )

 this.gvarForm = this.fb.group({
          name: ['', Validators.required],
          value: ['', Validators.required],
      });

Дайте мне знать, если у вас все еще есть проблемы после рефакторинга.с этим битом, добавленным в html 

{{JSON.stringify(registerForm.value)}}

(Только я до сих пор не уверен насчет заголовка.

Добавление массива объектов с построителем форм и угловыми материальными чипами

Я предполагаю, что у вас есть список тегов, которые вы добавляете в другой компонент динамически).

Некоторые скриншоты - даже если вы используете что-то грубое, например Paint, Preview или отсканированное рукописное написание UI, это поможет укрепить мое понимание.

Тем временем, это можетпомочь тоже.

...