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?

Answer 1

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

Answer 2

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