How to check if at least one of three input fields is filled with content in Angular 7

Question

I am developing a web client with angular 7 and bootstrap. On my start page I have a form group with three input fields and a submit button which shall be disabled until at least one of the three fields gets some input data from the user. How can I achieve that?

Please share the code in [stackblitz](https://stackblitz.com/edit/angular) — Deepu Reghunath, Feb 15 '19 at 09:12
Possible duplicate of [at least one field is required in angular 4 forms](https://stackoverflow.com/questions/50036992/at-least-one-field-is-required-in-angular-4-forms) — Amogh Hegde, Feb 15 '19 at 10:28

score 0 · Accepted Answer · answered Feb 15 '19 at 10:46

your html file.

<div class="row">
<div class="col-6">
    <input type="text" name="Aktenzeichen" [(ngModel)]="Aktenzeichen">
    <input type="number" name="Edvnumber" [(ngModel)]="Edvnumber">
    <input type="number" name="Dienstelle" [(ngModel)]="Dienstelle">
    <button type="button" *ngIf="Aktenzeichen ||  Edvnumber || Dienstelle"> Suche starten</button>
    <button type="button" *ngIf="Aktenzeichen ||  Edvnumber || Dienstelle"> Neue Suche</button>
</div>

your .ts file:

 import { Component, OnInit } from '@angular/core';


 @Component({
 selector: 'app-page',
 templateUrl: './login.component.html',
 styleUrls: ['./login.component.css']
 })
 export class PageComponent implements OnInit {
 Aktenzeichen:string;
 Edvnumber:number;
 Edvnumber:any;
 constructor() { }

 ngOnInit() {
   }
 }

Accept the answer to make your question useful for others. – Muhammad Abdullah Feb 17 '19 at 15:03 — Muhammad Abdullah, Feb 17 '19 at 15:03

score 0 · Answer 2 · answered Apr 29 '22 at 11:07

You can add custom validator to your FormGroup. Check is the form valid to toggle disabled property on your submit button.

  static groupAtLeastOneRequired(controlsNames: string[]): ValidatorFn {
    return (group: AbstractControl): ValidationErrors | null => {
      const controls: AbstractControl[] = controlsNames.map((controlName) => group.get(controlName));
      const values: (string | null)[] = controls.map((control) => control.value);

      const areAllEmpty = values.every((value) => value === null || value === '');

      if (areAllEmpty) {
        controls.forEach((control) => {
          control.addValidators(Validators.required);
          control.updateValueAndValidity({ onlySelf: true });
        });
      } else {
        controls.forEach((control) => {
          control.removeValidators(Validators.required);
          control.updateValueAndValidity({ onlySelf: true });
        });
      }

      return null;
    };
  }

How to check if at least one of three input fields is filled with content in Angular 7

2 Answers2