How to validate multiple forms in a single component ?(Reactive Forms Validation)

Question

<div class="modal-body">
<ul class="nav nav-pills" role="tablist">
    <li class="nav-item"><a class="nav-link active" data-toggle="pill" href="#EmployerLogin">Employer</a></li>
    <li class="nav-item"><a class="nav-link" data-toggle="pill" href="#seekerLogin">Candidate</a></li>
</ul>
<div class="tab-content">
    <div id="EmployerLogin" class="tab-pane  active">
        <form class="form-horizontal" [formGroup]="registerForm" (ngSubmit)="employerLogin()">
            <input type="email" [(ngModel)]="emplogin.employer_email" formControlName="elogin" name="empname" class="form-control"
                [ngClass]="{ 'is-invalid': submitted && f.elogin.errors }" placeholder="Email">
            <div *ngIf="submitted && f.elogin.errors" class="invalid-feedback">
                <div *ngIf="f.elogin.errors.required"> Email is required</div>
            </div>
            <button class="btn btn-default">Login</button>
        </form>
    </div>
    <div id="seekerLogin" class="tab-pane fade">
        <form class="form-horizontal" [formGroup]="registerForm" (ngSubmit)="seekerLogin()">
            <input type="text" [(ngModel)]="seekerlogin.seeker_email" formControlName="empEmail" name="empname"
                class="form-control" [ngClass]="{ 'is-invalid': submitted && f.empEmail.errors }" placeholder="Email">
            <div *ngIf="submitted && f.empEmail.errors" class="invalid-feedback">
                <div *ngIf="f.empEmail.errors.required"> Email is required</div>
            </div>
            <button class="btn btn-default">Login</button>
        </form>
    </div>
</div>

login.ts

 import { Component, OnInit } from '@angular/core';
    import { FormBuilder, FormGroup, Validators } from '@angular/forms';
    @Component({
        selector: 'my-Header',
        templateUrl: './header.component.html',
    })
    export class HeaderComponent implements OnInit {
        constructor(private formBuilder: FormBuilder) { }
        registerForm: FormGroup;
        ngOnInit() {
            this.registerForm = this.formBuilder.group({
                elogin: ['', Validators.required]
            });
        }
        submitted: Boolean = false;
        // Employer  Login Method
       get f() { return this.registerForm.controls; }

        employerLogin() {
            this.submitted = true;
            if (this.registerForm.invalid) {
                return;
            }
        }
        // Seeker  Login Method
        seekerLogin() {
            this.submitted = true;
            if (this.registerForm.invalid) {
                return;
            }
        }
    }

How to validate both forms ,when i am trying to validate one of them its showing error for both side.is there any other way to validate multiple forms in a single component using Angular 6.Please note I am very new to Angular 6 and typescript, so I might be missing something obvious. :)

What exactly is your use case? Why are you using the same form? Any specific reason for that? You could have created two different formGroups to do this. — SiddAjmera
– SiddAjmera, Commented Jan 11, 2019 at 11:19

SiddAjmera · Accepted Answer · 2019-01-11 11:34:58Z

Since you're using the submitted boolean property to check for both the forms and each has a field that has a Validators.required applied to them, it won't be possible with just one FormGroup.

You will have to either create two different FormGroups altogether or you'll have to create two different FormGroups in the same registerForm FormGroup.

I'm going to show the latter approach in this answer:

Here's your Component:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private formBuilder: FormBuilder) { }
  registerForm: FormGroup;
  ngOnInit() {
    this.registerForm = this.formBuilder.group({
      employerGroup: this.formBuilder.group({
        elogin: ['', Validators.required]
      }),
      candidateGroup: this.formBuilder.group({
        empEmail: ['', Validators.required]
      })
    });
  }
  employerSubmitted: boolean = false;
  candidateSubmitted: boolean = false;
  // Employer  Login Method
  get fe() { return (<FormGroup>this.registerForm.get('employerGroup')).controls; }

  get fc() { return (<FormGroup>this.registerForm.get('candidateGroup')).controls; }

  get employerGroup() {
    return this.registerForm.get('employerGroup');
  }

  get candidateGroup() {
    return this.registerForm.get('candidateGroup');
  }

  employerLogin() {
    this.employerSubmitted = true;
    if (this.registerForm.invalid) {
      return;
    }
  }
  // Seeker  Login Method
  seekerLogin() {
    this.candidateSubmitted = true;
    if (this.registerForm.invalid) {
      return;
    }
  }

}

And then in your Component Template, bind to these FormGroups:

<div class="modal-body">
    <ul class="nav nav-pills" role="tablist">
        <li class="nav-item"><a class="nav-link active" data-toggle="pill" href="#EmployerLogin">Employer</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="pill" href="#seekerLogin">Candidate</a></li>
    </ul>
    <div class="tab-content">
        <div id="EmployerLogin" class="tab-pane  active">
            <form class="form-horizontal" [formGroup]="employerGroup" (ngSubmit)="employerLogin()">
                <input type="email" formControlName="elogin" name="empname" class="form-control"
                [ngClass]="{ 'is-invalid': employerSubmitted && fe.elogin.errors }" placeholder="Email">
            <div *ngIf="employerSubmitted && fe.elogin.errors" class="invalid-feedback">
                <div *ngIf="fe.elogin.errors.required"> Email is required</div>
            </div>
            <button class="btn btn-default">Login</button>
        </form>
    </div>

    <br>

    <div id="seekerLogin" class="tab-pane fade">
        <form class="form-horizontal" [formGroup]="candidateGroup" (ngSubmit)="seekerLogin()">
            <input type="text" formControlName="empEmail" name="empname"
                class="form-control" [ngClass]="{ 'is-invalid': candidateSubmitted && fc.empEmail.errors }" placeholder="Email">
            <div *ngIf="candidateSubmitted && fc.empEmail.errors" class="invalid-feedback">
                <div *ngIf="fc.empEmail.errors.required"> Email is required</div>
            </div>
            <button class="btn btn-default">Login</button>
        </form>
    </div>
</div>

Here's a Working Sample StackBlitz for your ref.

Thank you for explaining very briefly.For validation purpose both forms are working fine but when trying to submit one of them its not working.

sumit · Accepted Answer · 2019-01-11 19:06:04Z

You can create a form structure like this:

MasterForm = this.formbuilder.group({
grp1 = new FormGroup({
   formControl1,
   formControl2
}),
grp2 = new FormGroup({
   formControl3,
   formControl2
})
}, { validator: matchEmailsDomain(formControl1,formControl3)});

Create this form in some service. And now in your component get form object using some method of service like this:

getFormObject(){
   return this.MasterForm;
}

In your component then you can do something like this:

ngOnInit(){
   this.myUserForm = this.myFormService.getFormObject();
}

and in html use this myUserForm as [formGroup]="myUserForm ";

In your validator

export function matchEmailsDomain(fc1, fc2): ValidatorFn {
    return (control: FormGroup): ValidationErrors | null => {

       // your validator logic here

    };
}

Collectives™ on Stack Overflow

How to validate multiple forms in a single component ?(Reactive Forms Validation)

login.ts

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

login.ts

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related