Outline inputs - Material 2.0 Reactive Form Validation to m

Hi Rtchrisdev,

I have done something similar to what you are trying to achieve.

component.html:

<input type="text" class="form-control" [ngClass]="{'border-danger': (submitted && f.namefield.errors?.required)}"
  id="namefield" formControlName="namefield">

component.ts:

// field to indicate form submission state
  submitted: boolean;

  // getter to make accessing controls on html easier
  get f() { return this.stockForm.controls; }

  onSubmit(): void {
    // indicate that form was submitted
    this.submitted = true;

    // if form is still invalid then ignore
    if (!this.stockForm.valid) {
      return;
    }

    // form is now in a valid state, so proceed with what it is you want to do with the value    
  }

Explanation: [ngClass] allows you to specify the border style class based on the result of the expression. Once the form is submitted, we set the submitted property, then in the HTML we check if the form was submitted and if there are any errors on that specific formControl field. If both of these are true, the 'border-danger' class will apply and we will end up with a red outline around our input field.