Make checkbox group required based on textbox value in Angular

Question

I have a form and there is a checkbox and a textbox. Textbox is mandatory if checkbox is not checked. So I wrote the below code and it works fine.

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();
    });
}

Now I have another form. There are group of checkboxes and a textbox. Based on textbox value I want the checkbox mandatory. Now I don't know how can I declare checkbox group like above code.

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

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

PushpikaWan · Accepted Answer · 2021-06-06 06:48:37Z

1

A simple solution creates a reusable component (dumb) that provide the functionality you need. Here u can create a component with a textbox and check box which we can provide a name or any other dynamic data through inputs.

Then u can easily use that component by looping through your main component to render multiple check boxes and text inputs.

Simple example ->

in the main component

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))
  })
}

and inside template

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

edited Jun 6, 2021 at 6:48

answered Jun 6, 2021 at 6:42

PushpikaWan

2,5853 gold badges18 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arunkumar Ramasamy · Accepted Answer · 2021-06-06 08:26:15Z

You can also achieve with FormArray and FormGroup.

Your Component.ts file

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;
  }
}

Your component.html file

<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>

Example: https://stackblitz.com/edit/angular-ivy-4gcwgl

Collectives™ on Stack Overflow

Make checkbox group required based on textbox value in Angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related