nzMode="tags" in FormGroup adding items to FormArray

user_8202286 0
Viewed 528

I am struggling to figure out how to use a formArray in a formGroup when using nz-select from ng-zorro-antd library ...

HTML:

<form nz-form [formGroup]="testForm" (ngSubmit)="onSubmit(testForm)">
  <nz-form-item>
    <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="thingsAroundProperty">
      Things around
    </nz-form-label>
    <nz-form-control [nzSm]="18" [nzXs]="24" nzErrorTip="The input is not valid">
       <nz-select nzMode="tags" nzPlaceHolder="Tag Mode" formArrayName="thingsAroundProperty">
          <nz-option *ngFor="let item of thingsAroundProperty; index as i;" [nzLabel]="item" [nzValue]="item">
          </nz-option>
         </nz-select>
      </nz-form-control>
  </nz-form-item>

  <button type="submit">Submit Form</button>
</form>

TS:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, FormArray } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit  {
  testForm: FormGroup;
  items = ['Gym', 'Pharmacy', 'Park'];

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.testForm = this.fb.group({
      selectTag: this.fb.array([])
    })
  }

  onSubmit(form: FormGroup) {
    console.log(form);
  }
}

Thank you

ng-zorro-antd angular
1 Answers

Picked up from git issue on official repo: https://github.com/NG-ZORRO/ng-zorro-antd/issues/4995

TS:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, FormArray } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit  {
  testForm: FormGroup;
  items = ['Gym', 'Pharmacy', 'Park'];

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.testForm = this.fb.group({
      selectTag: []
    })
  }

  onSubmit(form: FormGroup) {
    console.log(form);
  }
}

HTML:

<form nz-form [formGroup]="testForm" (ngSubmit)="onSubmit(testForm)">
  <nz-form-item>
    <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="items">Items TAGS</nz-form-label>
    <nz-form-control [nzSm]="18" [nzXs]="24" nzErrorTip="The input is not valid">
      <nz-select nzMode="tags" nzPlaceHolder="Tag Mode" formControlName="selectTag">
        <nz-option *ngFor="let item of items;" [nzLabel]="item" [nzValue]="item"></nz-option>
      </nz-select>
    </nz-form-control>
  </nz-form-item>

  <button type="submit">Submit</button>
</form>
user_111021410
Related