Проверка выпадающего списка angular

Question

Хотите напечатать * Требуется при отправке, если не выбрано значение Раскрывающийся список.

вот мой html.

 <select [(ngModel)]="selectedCategory.id" formControlName="Category" (change)="onSelect($event.target.value)" [ngClass]="{ 'is-invalid': submitted && Category.errors }">
            <option value="0">--Select--</option>
            <option *ngFor="let category of categories" [ngValue]="category">{{category.name}}</option>
          </select>
          <div *ngIf="submitted && Category.errors" class="invalid-feedback">
            <div *ngIf="Category.errors.required">Category is required</div>
        </div>
<button class="btn btn-primary"   >Add to Cart</button>

вот мой файл ts.

cart_form = new FormGroup({
    Category: new FormControl('', Validators.required),

  });

Answer 1

вам нужно изменить html на:

 <form [formGroup]="cart_form" >

    <select formControlName="category" (change)="onSelect($event.target.value)">
            <option [ngValue]="null">--Select--</option>
            <option *ngFor="let item of categories">{{item.name}}</option>
          </select> 
          <div *ngIf="!cart_form.controls.category.valid" class="invalid-feedback">
            <div *ngIf="cart_form.controls.category.errors.required">Title is required</div>
        </div>

        <button type="submit" [disabled]="cart_form.invalid">Submit</button>
</form>

и ваш компонент на

categories = [ {id: 1, name : 'test1'}, {id: 2, name : 'test12'}];
      selectedCategory = null;

      cart_form = new FormGroup({
        category: new FormControl(null, Validators.required),

      });

я создаю для вас демо https://stackblitz.com/edit/input-ngmodel-pnm31t?file=app / app.module .ts