title: Trying to validate that no field is empty in angular 6
body: <p>I am trying to create a simple user registration project in angular.I'm trying to validate that no field is left empty in the form.However I'm unable to do so.</p>
  
  <p>Here is my ts code:</p>
  
  <pre><code>export class AdduserComponent implements OnInit {
  
  
    constructor(private formBuilder:FormBuilder,private userService:UsersService,private router:Router) { }
    addForm: FormGroup;
    selected = 'option2';
  
    ngOnInit() {
  
      this.addForm = this.formBuilder.group({
        id: [],
        userName: ['', Validators.required],
        password: ['', Validators.required],
        userRole:['',Validators.required],
      });
    }
    onSubmit() {
      this.userService.createUser(this.addForm.value)
        .subscribe( data =&gt; {
          this.router.navigate(['adduser']);
        });
      console.log(this.addForm.value);
    }
    changeClient(value) {
      console.log(value);
  }
  }
  </code></pre>
  
  <p>Here is my template:</p>
  
  <pre><code>&lt;form [formGroup]="addForm" class="login-form" (ngSubmit)="onSubmit()"&gt;
      &lt;div class="form-group"&gt;
          &lt;mat-form-field class="example-full-width"&gt;
  
        &lt;input matInput type="text" formControlName="userName" placeholder="userName" name="userName" class="form-control" id="userName"&gt;
          &lt;/mat-form-field&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group"&gt;
          &lt;mat-form-field class="example-full-width"&gt;
  
        &lt;input matInput type="password" formControlName="password" placeholder="Password" name="password" class="form-control" id="password"&gt;
      &lt;/mat-form-field&gt;
      &lt;/div&gt;
  
      &lt;mat-form-field&gt;
          &lt;mat-select panelClass="example-panel-blue.mat-select-panel" placeholder="Roles" formControlName="userRole" id="userRole" (selectionChange)="changeClient($event.value)" [(value)]="selected"&gt;
            &lt;mat-option value="Admin"&gt;Admin&lt;/mat-option&gt;
  
  
          &lt;/mat-select&gt;
        &lt;/mat-form-field&gt;
        &lt;div class="container" style="margin: 12px" fxLayout="row" fxLayoutAlign="center center"&gt;
  
  
      &lt;button mat-raised-button color="primary"&gt;Create&lt;/button&gt;
        &lt;/div&gt;
    &lt;/form&gt;
  </code></pre>
  
  <p>I've added validators but still I'm able to create user with null values.Please help.Thanks in advance</p>