title: How to check for changes in form controls using Angular5
body: <p>Im using reactive forms, I have multiple inputs, I want display a single error for de three inputs, the validatons are; fields are required and blank spaces should not be entered. </p>
  
  <p>component.html:</p>
  
  <pre><code>    &lt;form [formGroup]="contratoForm" class="campo-form"&gt;
          &lt;div class="campoFormulario"&gt;
              &lt;label class="etiquetaFormulario" for="txtCodigoContrato"&gt;Código contrato&lt;/label&gt;
              &lt;div style="display:inline-block; position: relative;"  class="control"&gt;
                  &lt;input [formControl]="txtCodigoContrato" type="text" id="txtCodigoContrato" name="txtCodigoContrato" class="cajaTexto ancho80" /&gt;
                  &lt;span&gt;/&lt;/span&gt;
              &lt;/div&gt;                
              &lt;div style="display:inline-block; position: relative;" class="control"&gt;                
                  &lt;input [formControl]="txtCodigoContrato2" type="text" id="txtCodigoContrato2" name="txtCodigoContrato2" class="cajaTexto ancho80" /&gt;              
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="campoFormulario"&gt;
              &lt;label class="etiquetaFormulario" for="txtContrato"&gt;Contrato&lt;/label&gt;
              &lt;div style="display:inline-block; position: relative;" class="control"&gt;
                  &lt;input [formControl]="txtContrato" type="text" id="txtContrato" name="txtContrato" class="cajaTexto ancho350" /&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
           &lt;div *ngIf="((!txtCodigoContrato.valid &amp;&amp; (txtCodigoContrato.dirty || txtCodigoContrato.touched)) &amp;&amp; (txtCodigoContrato.hasError('required') || txtCodigoContrato.hasError('hasWhites')))
                  ||
                  ((!txtCodigoContrato2.valid &amp;&amp; (txtCodigoContrato2.dirty || txtCodigoContrato2.touched)) &amp;&amp; (txtCodigoContrato2.hasError('required') || txtCodigoContrato2.hasError('hasWhites')))
                  ||
           ((!txtContrato.valid &amp;&amp; (txtContrato.dirty || txtContrato.touched)) &amp;&amp; (txtContrato.hasError('required') || txtContrato.hasError('hasWhites')))
                  "&gt;
  
              &lt;span&gt;check the fields in red, they are required&lt;/span&gt;    
          &lt;/div&gt;              
          &lt;div class="buttons"&gt;
              &lt;button class="btn btn-primary boton" type="button" style="float:right;" (click)="onCloseLink()"&gt;
                  &lt;span class="glyphicon glyphicon-off"&gt;&lt;/span&gt; Cancel
              &lt;/button&gt;
  
              &lt;button class="btn btn-primary boton" type="button" style="float:right;" (click)="limpiar()"&gt;
                  &lt;span class="glyphicon glyphicon-trash"&gt;&lt;/span&gt; Clean
              &lt;/button&gt;
              &lt;button type="submit" [disabled]="!contratoForm.valid" class="btn btn-primary boton" style="float:right;" (click)="onClick()"&gt;
                  &lt;span class="glyphicon glyphicon-floppy-disk"&gt;&lt;/span&gt; Save
              &lt;/button&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p>component.ts:</p>
  
  <pre><code>    import { Component, HostBinding, OnDestroy, OnInit, Input, Output, EventEmitter, ElementRef, NgModule, ViewChild, ChangeDetectorRef  } from '@angular/core';
      import { Validators, FormBuilder, FormControl, FormGroup, AbstractControl} from '@angular/forms';
      import { AfterViewChecked } from '@angular/core/src/metadata/lifecycle_hooks';
  
      @Component({
          selector: 'app-formulario-contrato',
          templateUrl: './contrato.component.html',
          styleUrls: ['./contrato.component.css'] 
      })
      export class FormularioContratoComponent  {
  
          contratoForm: FormGroup;  
  
          constructor(private elRef: ElementRef, private formBuilder: FormBuilder, private cdRef: ChangeDetectorRef) {     
              this.createForm();           
          }
  
          txtCodigoContrato = new FormControl('', [
              Validators.required
              ,this.hasNotWhites
          ]);
          txtCodigoContrato2 = new FormControl('', [
              Validators.required
              , this.hasNotWhites
          ]);
          txtContrato = new FormControl('', [
              Validators.required
              , this.hasNotWhites
          ]);
  
          createForm() {
              this.contratoForm = this.formBuilder.group({
                  txtCodigoContrato: this.txtCodigoContrato
                  ,txtCodigoContrato2: this.txtCodigoContrato2
                  ,txtContrato: this.txtContrato           
              });
          }  
  
          hasNotWhites(fieldControl: FormControl) {
              if (fieldControl.value.trim() != '') {
                  return null
              }
              else {
                 return { hasWhites: true };
              }          
          }
  
          ngAfterViewChecked() {
              this.cdRef.detectChanges();
          }
  
          limpiar() {   
          }
  
          onClick() {
              return null;
          }
  </code></pre>
  
  <p>component.css:</p>
  
  <pre><code>/* some stuff...*/
  :host /deep/ .control input.ng-invalid.ng-touched {
    border-color: #ff8080;
  }
  </code></pre>
  
  <p>The validations work correctly, that is, they jump when the field stays empty or when I enter blank spaces. My problem is that I have to add more form controls and the if it contains the message can be made illegible:</p>
  
  <pre><code>  &lt;div *ngIf="((!txtCodigoContrato.valid &amp;&amp; (txtCodigoContrato.dirty || 
    txtCodigoContrato.touched)) &amp;&amp; (txtCodigoContrato.hasError('required') || 
    txtCodigoContrato.hasError('hasWhites')))
                  ||
                  ((!txtCodigoContrato2.valid &amp;&amp; (txtCodigoContrato2.dirty || 
    txtCodigoContrato2.touched)) &amp;&amp; (txtCodigoContrato2.hasError('required') || 
    txtCodigoContrato2.hasError('hasWhites')))
                  ||
           ((!txtContrato.valid &amp;&amp; (txtContrato.dirty || txtContrato.touched)) 
    &amp;&amp; (txtContrato.hasError('required') || txtContrato.hasError('hasWhites')))
                  "&gt;
  </code></pre>
  
  <p>Is there any way to control these values by typescript, that is, each time a value in the control changes it is controlled by a function in typeScript that returns true or false and if only ask for the value of that function in my div? </p>