title: Angular 5 ngx-bootstrap form validation
body: <p>I'm reading Ari Lerner's <code>ng-book</code> on Angular 5.  I'm using <code>ngx-bootstrap</code> and <code>Bootstrap 4</code>.  Form validation doesn't seem to be working the way Mr. Lerner implements.  I'm not sure if this is a limitation of <code>ngx-bootstrap</code>...anyone know?</p>
  
  <p><strong>edit</strong>
  Ok, I removed <code>ngx-bootstrap</code> and just loaded up the MaxCDNs for <code>Bootstrap 4</code> and I have the same problem.  The error message is not appearing.</p>
  
  <p><strong>app.module.ts</strong></p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  
  import { AppComponent } from './app.component';
  import { NavbarComponent } from './navbar/navbar.component';
  import { RegistrationFormComponent } from './registration-form/registration-form.component';
  import {
    FormsModule,
    ReactiveFormsModule,
    FormBuilder,
    FormGroup
  } from '@angular/forms';
  
  @NgModule({
    declarations: [
      AppComponent,
      NavbarComponent,
      RegistrationFormComponent
    ],
    imports: [
      BrowserModule,
      FormsModule,
      ReactiveFormsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p><strong>registration-form.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import {
    FormBuilder,
    FormGroup,
    Validators
  } from '@angular/forms';
  
  @Component({
    selector: 'app-registration-form',
    templateUrl: './registration-form.component.html',
    styleUrls: ['./registration-form.component.scss']
  })
  export class RegistrationFormComponent implements OnInit {
    regForm: FormGroup;
    // name: AbstractControl;
  
    constructor(fb: FormBuilder) {
      this.regForm = fb.group({
        'name': ['', Validators.required],
        // 'email': ['', Validators.required],
        // 'password': ['', Validators.required],
        // 'password_confirmation': ['', Validators.required]
      });
  
      // this.name = this.regForm.controls['name'];
    }
  
    ngOnInit() {
    }
  
    onSubmit(value: string): void{
      console.log(value);
    }
  }
  </code></pre>
  
  <p><strong>registration-form.component.html</strong></p>
  
  <pre><code>&lt;div class="row justify-content-center"&gt;
    &lt;h1&gt;New User&lt;/h1&gt;
  &lt;/div&gt;
  
  &lt;div class='row justify-content-center'&gt;
    &lt;div class='col-6'&gt;
      &lt;form [formGroup]='regForm'
      (ngSubmit)="onSubmit(regForm.value)"
      [class.error]="!regForm.valid &amp;&amp; regForm.touched"
      &gt;
        &lt;div class='form-group'
          [class.error]="!regForm.get('name').valid &amp;&amp; regForm.get('name').touched"&gt;
          &lt;label&gt;Name&lt;/label&gt;
          &lt;input type="text" class='form-control' [formControl]="regForm.controls['name']"&gt;
          &lt;div *ngIf="regForm.controls['name'].hasError('required')" class="invalid-feedback"&gt;Name is required&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class='form-group'&gt;
          &lt;label&gt;Email&lt;/label&gt;
          &lt;input type="email" class='form-control'&gt;
        &lt;/div&gt;
        &lt;div class='form-group'&gt;
          &lt;label&gt;Password&lt;/label&gt;
          &lt;input type="password" class='form-control'&gt;
        &lt;/div&gt;
        &lt;div class='form-group'&gt;
          &lt;label&gt;Confirmation&lt;/label&gt;
          &lt;input type="password" class='form-control'&gt;
        &lt;/div&gt;
        &lt;button type="submit" class='btn btn-default'&gt;Submit&lt;/button&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>