Как сделать опцию выбора с добавлением нового элемента динамически c в angular - PullRequest
Новая
       49

Как сделать опцию выбора с добавлением нового элемента динамически c в angular

0 голосов
/ 18 марта 2020

Вот код: https://stackblitz.com/edit/angular-gs8yo7?file=src / app / app.component.ts

HTML

<form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
       <nz-form-item *ngFor="let control of listOfControl; let i = index">
          <nz-form-label *ngIf="i == 0" [nzFor]="control.controlInstance">
            <span translate>Project(s)</span>
          </nz-form-label>
          <nz-form-control [nzXs]="24">
            <div nz-row nzGutter="8">
              <div nz-col nzSpan="11">
                <nz-select [formControlName]="project" name="projects" [attr.id]="control.id"
                  [nzPlaceHolder]="'Select Project(s)'">
                  <nz-option *ngFor="let item of project" [nzLabel]="item.description" [nzValue]="item.id">
                  </nz-option>
                </nz-select>
              </div>
              <div nz-col nzSpan="11">
                <nz-select formControlName="role" name="role" nzPlaceHolder="">
                  <nz-option *ngFor="let item of roles" [nzLabel]="item" [nzValue]="item"></nz-option>
                </nz-select>
              </div>
              <div nz-col nzSpan="2">
                <i nz-icon nzType="minus-circle-o" class="dynamic-delete-button"
                  (click)="removeField(control, $event)"></i>
              </div>
            </div>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-control>
            <button nz-button nzType="dashed" class="add-button" (click)="addField($event)">
              <i nz-icon nzType="plus"></i>
              Add field
            </button>
          </nz-form-control>
        </nz-form-item>
      <nz-form-item>
        <nz-form-control [nzXs]="{ span: 24, offset: 0 }" [nzSm]="{ span: 20, offset: 4 }">
          <button nz-button nzType="primary">Submit</button>
        </nz-form-control>
      </nz-form-item>
    </form>

TS 

validateForm: FormGroup;
  listOfControl: Array<{ id: number; controlInstance: string }> = [];

  projects = [{
    "id": "1ueI",
    "description": "Project1"
  },{
    "id": "iqwu28",
    "description": "Project2"
  },{
    "id": "1938qwe",
    "description": "Project3"
  }];

  roles = ['ROLE_ADMIN', 'ROLE_USER'];

  addField(e?: MouseEvent): void {
    if (e) {
      e.preventDefault();
    }
    const id = this.listOfControl.length > 0 ? this.listOfControl[this.listOfControl.length - 1].id + 1 : 0;

    const control = {
      id,
      controlInstance: `passenger${id}`
    };
    const index = this.listOfControl.push(control);
    console.log(this.listOfControl[this.listOfControl.length - 1]);
    this.validateForm.addControl(
      this.listOfControl[index - 1].controlInstance,
      new FormControl(null, Validators.required)
    );
  }

  removeField(i: { id: number; controlInstance: string }, e: MouseEvent): void {
    e.preventDefault();
    if (this.listOfControl.length > 1) {
      const index = this.listOfControl.indexOf(i);
      this.listOfControl.splice(index, 1);
      console.log(this.listOfControl);
      this.validateForm.removeControl(i.controlInstance);
    }
  }

  submitForm(): void {

  }

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.validateForm = this.fb.group({});
    this.addField();
  }

То, что я пытаюсь сделать здесь, - это когда проект уже выбран, его следует удалить, даже когда вы добавляете новый элемент .

и когда он отправляется, должен быть динамическим c. 

[
{ id: projectId, role: role },
{ id: projectId, role: role },
]

как 

 [{id: 1ueI, role: "ROLE_ADMIN" }, {id: 1938qwe, role: "ROLE_USER" }]

например, когда вы выбираете ПРОЕКТ 1, он будет из списка затем, когда вы добавляете новый элемент, он также должен отображаться в списке, он просто показывает ПРОЕКТ 2 и ПРОЕКТ 3.

...