下拉列表验证角度

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