对于angular2模板形式,如何强制用户选择下拉列表和重置按钮的默认值以外的方法如何将值重置为默认值?

时间:2017-11-05 10:02:53

标签: angular

我有以下场景,我从角度站点获取模板表单示例,我想实现以下 -

  1. 要求用户从下拉列表中选择默认值以外的其他值吗?
  2. 点击重设时,点击将值重置为默认值。
  3. 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'};
    
    }
    

0 个答案:

没有答案