#How to add child component form control to parent form group?

25 messages · Page 1 of 1 (latest)

meager marlin
#

I have a login form with three fields: email, password, and remember. The remember is a custom checkbox component (app-checkbox)

To manage the login form I use the reactive form. My question is, how i can add the checkbox to the FormGroup of my father component if it's a child component?

this.userLoginForm = new FormGroup({
      email: new FormControl('', [Validators.required, Validators.email]),
      password: new FormControl('', [Validators.required]),
      remember: new FormControl(''),
    });

<form [formGroup]="userLoginForm" (ngSubmit)="onSubmit()">
    <app-checkbox label='Remember'></app-checkbox>

    <input type="text" id="email" formControlName="email" autofocus>
    <input type="password" id="password" formControlName="password">
    <input type="submit" value="Ingresar">
</form>
 
<!-- checkbox -->
<div class="ccheckbox">
    <label>{{ label }}
        <input class="input" type="checkbox" [(ngModel)]="isChecked">
        <span class="checkmark"></span>
    </label>
</div>

  @Input() label:string;

  isChecked:boolean;

  constructor() {
    this.isChecked = false;
    this.label = 'pass-label';
  }
#

How to add child componente form control to parent form group?

#

How to add child component form control to parent form group?

solid sky
#

read about ControlValueAccessor

hazy ember
#

To include the checkbox component as a part of the form in the parent component, you can bind the value of the checkbox to the form control using the formControlName directive.

Here's how you could update the checkbox component to bind its value to the remember form control:

<app-checkbox label='Remember' formControlName="remember"></app-checkbox>

You will also need to update the checkbox component to accept the formControlName input and use it to bind the value of the checkbox to the form control. Here's an example of how you could do this:

import { FormControl } from '@angular/forms';

@Component({
selector: 'app-checkbox',
template: <div class="ccheckbox"> <label>{{ label }} <input class="input" type="checkbox" [formControl]="formControl"> <span class="checkmark"></span> </label> </div> })


export class CheckboxComponent {
@Input() label: string;
@Input() formControl: FormControl;

constructor() {
this.label = 'pass-label';
}
}```
solid sky
#

You should never use ngModel and formControl on the same element.

hazy ember
meager marlin
#

In the end i did this:

<app-checkbox label="Remember" [parentForm]="userLoginForm" controlName="rememberMe"></app-checkbox>

    <label class="label" [formGroup]="parentForm!">{{ label }}
        <input class="input" type="checkbox" [formControlName]="controlName">
        <span class="checkmark"></span>
    </label>
#

passing the FormGroup and the control name (i have a page with two checkboxes)

  @Input() parentForm?:FormGroup;
  @Input() controlName:string;
cloud cipher
#

The child form should just take a FormControl input. It doesn’t need the whole parent form group.

#

If it needs to be enabled/disabled based off another control in the group, the parent component should be the one to manage that

#

If you find yourself mutating then formgroup or formcontrol within the child, you’re doing something you shouldn’t be

#

The child should just take in the formcontrol and bind it to an input

#

In the parent, just pass in the control with formgroup.get(‘controlname’)

ember gust
#

☝️ makes it only work with reactive forms, even worse... Only formControl and not formControlName. Can be fine, but not unimportant to realize.

#

CVA, as mentioned above, works with both types of forms at once (and supports formControl and formControlName ) and doesnt require using form primitives inside the custom form element.

#

Because you don't want to start adding required, or any validator, inside the custom form controls.

#

Passing a form control does allow for that, which can make it less reusable.

#

Again, can be fine, depending on the use case.

#

That said, CVA isn't that hard ONCE you master it. But it can be a bit scary at first.

#

But once you master CVA, i see no reason to pass a formControl as an input.

#

But as long as you are aware of the above, it should be fine!

meager marlin
#

Thank All for the help