我有以下场景,我从角度站点获取模板表单示例,我想实现以下 -
Plunkar示例 - https://plnkr.co/edit/k0nrnziXJa2xpQI41BjQ?p=preview
<div class="form-group">
<label for="power">Hero Power</label>
<select id="power"
name="power"
class="form-control"
required
[(ngModel)]="hero.power"
#power="ngModel">
<option [value]="0" selected disabled>Please Select</option>
<option *ngFor="let p of powers" [value]="p">{{p}}</option>
</select>
<div *ngIf="power.errors && power.touched && hero.power=='0'" class="alert alert-danger">
<div *ngIf="hero.power=='0'">Power is required.</div>
</div>
组件代码 -
import { Component } from '@angular/core';
@Component({
selector: 'app-hero-form-template',
templateUrl: './hero-form-template.component.html'
})
export class HeroFormTemplateComponent {
powers = ['Really Smart', 'Super Flexible', 'Weather Changer'];
hero = {name: 'Dr.', alterEgo: 'Dr. What', power: '0'};
}