how to submit a form in another component Angular

Question

Hi I have a form in one component (without button) and I have a parent component with a button to go to the next step. I would like to know how to check if the form is valid in the parent component to be able to go to the next step.

childcomponent.html

<form
  
  [formGroup]="form"
  class="clr-row"
  (ngSubmit)="formSubmit.emit()"
>
  <select
      formControlName="chosenYear"
      required
      name="years"
      (click)="changeYearComponent()"
      [(ngModel)]="chosenYear"
    >
      <option *ngFor="let year of years" [value]="year">
        {{ year }}
      </option>
    </select>
</form>

parentcomponent.ts

@ViewChild(childComponent)
  public childComponent!:childComponent;
@Input() public form: FormGroup;

 test()  {
    if (this.form.valid) {
      this.next();
     }
}

parentcomponent.html

<button
            type="submit"
            class="btn btn-primary"
            (click)="test()"
           
          >
            NEXT
          </button>

Lautaro Lopez Ruiz · Accepted Answer · 2022-03-14 09:50:38Z

3

You can use view child to see your child component

@ViewChild(ChildComponent)
yourChildComponent!: ChildComponent;

then you could access to child properties and methods.

nextStep(){
 if(this.yourChildComponent.form.valid){
  ...
 }
}

answered Mar 14, 2022 at 9:50

Lautaro Lopez Ruiz

1444 bronze badges

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

Collectives™ on Stack Overflow

how to submit a form in another component Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related