title: Angular form select and input required
body: <p>I want that the select and the input of the form is required. I tried to follow the tutorial on the angular website, however it doesn't work for me or I mixed something up. How can I fix it?</p>
  
  <p>That's my html file:</p>
  
  <pre><code>&lt;form [formGroup]="angForm"  class="form-inline my-5 my-lg-0"&gt;
    &lt;select #emoji class="textboxclass" type="text" placeholder="Emojy" aria-label="Post" required&gt;
      &lt;option value="" disabled selected&gt;Emojy&lt;/option&gt;
      &lt;option value="angry" style="background-image:url(~assets/emoticons/png/angry.png);"&gt;angry&lt;/option&gt;
      &lt;option value="bored" style="background-image:url(~assets/emoticons/png/bored.png);"&gt;bored&lt;/option&gt;
      &lt;option value="confused" style="background-image:url(~assets/emoticons/png/confused.png);"&gt;confused&lt;/option&gt;
      &lt;option value="embarrassed" style="background-image:url(~assets/emoticons/png/embarrassed.png);"&gt;embarrassed&lt;/option&gt;
      &lt;option value="happy" style="background-image:url(~assets/emoticons/png/happy.png);"&gt;happy&lt;/option&gt;
      &lt;option value="kissing" style="background-image:url(~assets/emoticons/png/kissing.png);"&gt;kissing&lt;/option&gt;
      &lt;option value="unhappy" style="background-image:url(~assets/emoticons/png/unhappy.png);"&gt;unhappy&lt;/option&gt;
    &lt;/select&gt;
    &lt;input #text id="postText" name="postText" class="form-control" type="text" placeholder="Write your Mood" aria-label="Post"
           formControlName="postText" required&gt;
    &lt;div *ngIf="angForm.controls['postText'].invalid &amp;&amp; (angForm.controls['postText'].dirty
    || angForm.controls['postText'].touched)" class="alert alert-danger"&gt;
      &lt;div *ngIf="angForm.controls['postText'].errors.required"&gt;Text required&lt;/div&gt;
    &lt;/div&gt;
  
  
  &lt;/form&gt;
  
  &lt;button class="btn btn-outline-success my-2 my-sm-0" (click)="postMood(emoji.value, text.value)"&gt;Post &lt;/button &gt;
  </code></pre>
  
  <p>And that is my component file:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import {PostServiceService} from './post-service.service';
  import {FormBuilder, FormGroup, Validators} from '@angular/forms';
  
  @Component({
    selector: 'app-post-service',
    templateUrl: './post-service.component.html',
    providers: [PostServiceService],
    styleUrls: ['./post-service.component.css']
  })
  export class PostServiceComponent implements OnInit {
    angForm: FormGroup;
  
    constructor(private postService: PostServiceService, private  fb: FormBuilder) {this.createForm(); }
  
    ngOnInit(): void {
    }
  
    createForm() {
      this.angForm = this.fb.group({postText: ['', Validators.required]});
    }
  
    postMood(emoji, text): void {
      this.postService.postMoods(emoji, text);
    }
  
  }
  </code></pre>