matInput styles code example

Example 1: 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;
    }
  }

Example 2: mat-form-field email validation

<input matInput placeholder="Favorite food" [(ngModel)]="enterEmail" name="myEmail" pattern="[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}" required>