Reactive Forms Example

reactiveform.component.html

<form [formGroup]="form">
  <p>
    <mdl-textfield label="First Name" name="firstname" type="text" formControlName="firstName" floating-label></mdl-textfield>
  </p>
  <p>
    <mdl-textfield label="Last Name" name="lastname" type="text" formControlName="lastName" floating-label></mdl-textfield>
  </p>
  <p>
    Which breakfast do you prefer?<br/>
    <mdl-radio name="breakfast" value="Continental" formControlName="breakfast" mdl-ripple>Continental</mdl-radio>
    <mdl-radio name="breakfast" value="British" formControlName="breakfast" mdl-ripple>British</mdl-radio>
  </p>
  <p>
    What would you like to drink?<br/>
    <mdl-radio name="toDrink" value="Coffee" formControlName="toDrink" mdl-ripple>Coffee</mdl-radio>
    <mdl-radio name="toDrink" value="Tea" formControlName="toDrink" mdl-ripple>Tea</mdl-radio>
  </p>
  <p>
    <mdl-textfield
            label="Email"
            name="email"
            type="text"
            formControlName="email"
            floating-label
            pattern="^[a-z]+[a-z0-9._]+@[a-z]+\.[a-z.]{2,5}$"
            error-msg="Please provide a correct email!"></mdl-textfield>
  </p>
  <p>
    <mdl-textfield
            [class.is-invalid]="email2.invalid"
            label="Email (2)"
            name="email2"
            type="text"
            formControlName="email2"
            disableNativeValidityChecking
            [error-msg]="'Please provide a correct email!'"
            floating-label></mdl-textfield>
  <br/>(disbled native checking)
  <p>
    <button mdl-button (click)="onSubmit()"  [disabled]="!form.valid" mdl-button-type="raised" mdl-ripple mdl-colored="primary">Submit</button>
  </p>
</form>