如果未選擇下拉值，則需要打印 *提交時需要。這是我的 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), });
1 回答
千巷貓影
TA貢獻1829條經驗 獲得超7個贊
您需要將 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
- 1 回答
- 0 關注
- 125 瀏覽
添加回答
舉報
0/150
提交
取消