title: touched and valid using reactive forms in Angular
body: <p>How can i use the touched and valid properties using reactive forms in angular 4. I've used in template driven forms and you can just put this <code>&lt;span class="text-muted" *ngIf="!fname.valid &amp;&amp; fname.touched"&gt; Please enter a valid first name&lt;/span&gt;</code> below the input field. I've also learned that reactive forms would be better since you have to write the logic in the component.ts. So i want it to implement in the reactive form and i'm stuck on how to use the touched and valid properties. </p>
  
  <blockquote>
    <p>html</p>
  </blockquote>
  
  <pre><code>&lt;form [formGroup]="form" (ngSubmit)="onSignIn(form)"&gt;
      &lt;div class="form-group"&gt;
          &lt;input type="text" class="form-control" id="email" placeholder="Enter email" formControlName="email"&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;input type="password" class="form-control" id="password" placeholder="Password" formControlName="password"&gt;
      &lt;/div&gt;&lt;button class="btn btn-primary btn-block" type="submit" [disabled]="!form.valid"&gt;Sign In&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <blockquote>
    <p>ts</p>
  </blockquote>
  
  <pre><code> 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 =&gt; {
          this.router.navigate(['/settings']);
          alert("Login Successful");
          console.log(data);
        },
        error =&gt; {
          alert("Invalid Email or Password");
          console.log(error);
        });
    }
  </code></pre>