Question

我想使用Angular 7在其中创建带有Div和Controls的FormArray。

单击添加按钮时，我已成功使用Angular FormArray创建控件，然后单击删除按钮时，已成功将其删除。我已经创建了component.ts和component.html。

component.ts

public form: FormGroup;
public menuList: FormArray;
public optionValue: string;


get menuFormGroup() {
  return this.form.get('menus') as FormArray;
}

constructor(private fb: FormBuilder) {}

ngOnInit() {
  this.form = this.fb.group({
    applicationname: [null, Validators.compose([Validators.required])],
    mainmenu: [null, Validators.compose([Validators.required])],
    replytype: [null, Validators.compose([Validators.required])],
    menus: this.fb.array([this.createMenu()])
  });
  this.menuList = this.form.get('menus') as FormArray;

  window.dispatchEvent(new Event('load'));
  window.dispatchEvent(new Event('resize'));

  document.body.className = 'skin-blue sidebar-mini';
}

createMenu(): FormGroup {
  return this.fb.group({
    type: ['tomenu', Validators.compose([Validators.required])], // 
    optionname: [null, Validators.compose([Validators.required])], // 
    value: [null, Validators.compose([Validators.required])]
  });
}

addMenu() {
  this.menuList.push(this.createMenu());
}

// remove menu from group
removeMenu(index) {
  this.menuList.removeAt(index);
}

// triggered to change validation of value field type
changedFieldType(index) {
  let validators = null;

  this.getMenusFormGroup(index).controls['value'].setValidators(
    validators
  );

  this.getMenusFormGroup(index).controls['value'].updateValueAndValidity();
}

getMenusFormGroup(index): FormGroup {
  const formGroup1 = this.menuList.controls[index] as FormGroup;
  return formGroup1;
}

component.html

<form [formGroup]="form" (submit)="submit()">
  <label>Menu</label>
  <select class="form-control" formControlName="type" type="text">
    <option value="menu1">Menu 1</option>
    <option value="menu2">Menu 2</option>
  </select>
  </div>

  <div class="row" formArrayName="menus" *ngIf="optionValue == 'predefined'">
    <div class="col-md-12" *ngFor="let menu of menuFormGroup.controls; let i = index;">
      <div [formGroupName]="i" class="row">
        <div class="col-md-11  no-padding">
          <div class="col-md-6">
            <label>Option</label>
            <input class="form-control" formControlName="optionname" type="text">
            <span class="text-danger" *ngIf="getMenusFormGroup(i).controls['optionname'].touched && getMenusFormGroup(i).controls['optionname'].hasError('required')">
              Label is required! </span>
          </div>
          <div class="col-md-6">
            <label>Take him to Menu</label>
            <select (change)="changedFieldType(i)" class="form-control" formControlName="type" type="text">
              <option value="menu1">Menu 1</option>
              <option value="menu2">Menu 2</option>
            </select>
          </div>
        </div>
        <div class="col-md-1">
          <label></label>
          <button class="btn btn-danger" type="button" (click)="removeMenu(i)"> X </button>
        </div>
      </div>

      <div class="box-footer" *ngIf="optionValue == 'predefined'">
        <div class="col-md-3">
          <button class="btn btn-primary" type="button" (click)="addMenu()"> <i class="fa fa-plus"></i>Add a reply option </button>
        </div>
      </div>
</form>

我已经能够使用FormArray添加和删除控件。但是：

当我单击“添加”按钮时，我应该能够使用一个Div围住控件并在其中创建控件。
当我单击“删除”按钮时，我应该能够删除Div和其中的所有控件。

Angular-如何使用表单数组创建具有内部控件的Div

0 个答案: