¿Cómo puedo usar las propiedades tocadas y válidas usando formas reactivas en angular 4. Lo he usado en formas controladas por plantillas y puedes simplemente poner esto<span class="text-muted" *ngIf="!fname.valid && fname.touched"> Please enter a valid first name</span> debajo del campo de entrada. También aprendí que las formas reactivas serían mejores ya que tienes que escribir la lógica en el componente.ts. Entonces, quiero que se implemente en forma reactiva y estoy atascado en cómo usar las propiedades válidas y tocadas.

html

<form [formGroup]="form" (ngSubmit)="onSignIn(form)">
    <div class="form-group">
        <input type="text" class="form-control" id="email" placeholder="Enter email" formControlName="email">
    </div>
    <div class="form-group">
        <input type="password" class="form-control" id="password" placeholder="Password" formControlName="password">
    </div><button class="btn btn-primary btn-block" type="submit" [disabled]="!form.valid">Sign In</button>
</form>

ts

 ngOnInit() {
    this.form = this.formBuilder.group({
      email: [null, [Validators.required, Validators.email]],
      password: [null, Validators.required],
    });
  }

  onSignIn(form: FormGroup){
    const email = form.value.email;
    const password = form.value.password;
    this.authService.loginUser(email, password)
    .subscribe(
      data => {
        this.router.navigate(['/settings']);
        alert("Login Successful");
        console.log(data);
      },
      error => {
        alert("Invalid Email or Password");
        console.log(error);
      });
  }