material angular form control code example

Example 1: mat input formatter tel

ngOnInit() {

    let MOBILE_PATTERN = /[0-9\+\-\ ]/;

    this.emailForm = new FormGroup({
      PhoneNumber:new FormControl('',[Validators.pattern(MOBILE_PATTERN)])
    });
}

Example 2: stylin mat input

//Standard
  .mat-form-field {
    .mat-input-element {
      color: slategray;
    }
    .mat-form-field-label {
      color: slategray;
    }
    .mat-form-field-underline {
      background-color: slategray;
    }
    .mat-form-field-ripple {
      background-color: slategray;
    }
    .mat-form-field-required-marker {
      color: slategray;
    }
  }

  //Focus
  .mat-form-field.mat-focused {
    .mat-form-field-label {
      color: #ff884d;
    }
    .mat-form-field-ripple {
      background-color: #ff884d;
    }
    .mat-form-field-required-marker {
      color: #ff884d;
    }
    .mat-input-element {
      color: #ff884d;
    }
  }

  //Error
  .mat-form-field.mat-form-field-invalid {
    .mat-input-element {
      color: #ff33cc;
    }
    .mat-form-field-label {
      color: #ff33cc;
      .mat-form-field-required-marker {
        color: #ff33cc;
      }
    }
    .mat-form-field-ripple {
      background-color: #ff33cc;
    }
  }