mat-select need to be required but i dont know how

Issue

I need help putting both mat-selects as required but I don’t know how to do it, someone could help me please

html code:

      <!--Slider 1-->
      <mat-form-field appearance="fill">
        <mat-label>Departure From</mat-label>
        <mat-select>
          <mat-option value="fiumicino">Fiumicino Airport</mat-option>
          <mat-option value="ciampino">Ciampino Airport</mat-option>
          <mat-option value="civitavecchia">Civitavecchia Port</mat-option>
          <mat-option value="rome">Rome City</mat-option>
        </mat-select>
      </mat-form-field>

     <!--Slider 2-->
      <div class="slider">
        <mat-form-field appearance="fill" required="mat-option">
          <mat-label>Arrival At</mat-label>
          <mat-select formControlName='Arrival'>
            <mat-option value="fiumicino">Ciampino Airport</mat-option>
            <mat-option value="civitavecchia">Civitavecchia Port</mat-option>
            <mat-option value="rome">Rome City</mat-option>
            <mat-option value="fiumicino">Fiumicino Airport</mat-option>
          </mat-select>
        </mat-form-field>
      </div>

Solution

You use Reactive Forms, so in your typescript :

form = this.formBuilder.group({
  // ...
  Arrival: [undefined, [Validators.required]]
});

Answered By – MGX

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0