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

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 >
        <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>

CodePudding user response：

You use Reactive Forms, so in your typescript :


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