根据Angular中的文本框值制作需要的复选框组

问题描述

我有一个表格，有一个复选框和一个文本框。如果未选中复选框，则文本框是必需的。所以我写了下面的代码，它工作正常。

autoCodeCheckBox: FormControl = new FormControl();
autoCodeInput: FormControl = new FormControl('',Validators.required);

ngOnInit(): void {
    this.frmExpenseHead = new FormGroup({      
      autoCode: this.autoCodeCheckBox,code: this.autoCodeInput      
    });
    
    this.autoCodeCheckBox.valueChanges.subscribe(data => {
      if (data) {
        this.autoCodeInput.setValidators(null);
      }
      else {
        this.autoCodeInput.setValidators(Validators.required);
      }

      this.autoCodeInput.updateValueAndValidity();
    });
}

现在我有另一种形式。有一组复选框和一个文本框。 基于文本框值，我希望复选框是强制性的。现在我不知道如何像上面的代码一样声明复选框组。

userName: FormControl = new FormControl('');
checkArray: .......

constructor(private fb: FormBuilder) {}
  
ngOnInit(): void {
    this.form = this.fb.group({
      userNameInput: userName,checkArray: this.fb.array([],[Validators.required])
    })
}  

解决方法

一个简单的解决方案创建了一个可重用的组件（哑组件），提供您需要的功能。在这里你可以创建一个带有文本框和复选框的组件，我们可以通过输入提供名称或任何其他动态数据。

然后，您可以通过循环主组件来渲染多个复选框和文本输入，从而轻松使用该组件。

简单例子 ->

在主要组件中

constructor(private fb: FormBuilder) {
  this.myFormGroup = this.fb.group({});
}

ngOnInit() {
  //dynamic formcontroller name create by appending index
  [array of those component].map((data,i) => {
    this.myFormGroup.addControl('mySet'+i,this.fb.control(data.propertUNeed))
  })
}

和内部模板

<div *ngFor="let ctrl of myFormGroup.controls | keyvalue">
  ..... do what ever thing u need
</div>

,

您也可以使用 FormArray 和 FormGroup 来实现。

您的 Component.ts 文件

export class HomeComponent implements OnInit {
  formArray: FormArray;
  formGroups: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.formGroups = this.fb.group({
      name: '',check: this.fb.array([])
    });
    this.addGroup(true,'John');
    this.addGroup(true,'David');
    this.addGroup(true,'Francis');
    this.formGroups.valueChanges.subscribe(() => {
      console.log(this.getGroupArray.controls);
    });
  }

  createGroup(checkText: boolean,name: string = '') {
    return new FormGroup({
      checkbox: new FormControl(checkText),name: new FormControl(name)
    });
  }

  addGroup(checkbox: boolean,name: string) {
    this.getGroupArray.push(this.createGroup(checkbox,name));
  }

  get getGroupArray(): FormArray {
    return this.formGroups.get('check') as FormArray;
  }
}

您的 component.html 文件

<form [formGroup]="formGroups">

  <div formArrayName="check">
    <div *ngFor="let check of getGroupArray.controls; let i= index">
      <div [formGroupName]="i">
        <input type="checkbox" formControlName="checkbox">
        <input type="text" formControlName="name">
      </div>
    </div>
  </div>

</form>

示例：https://stackblitz.com/edit/angular-ivy-4gcwgl