默认情况下,禁用角度反应形式的非选定无线电

时间:2017-05-16 01:33:23

标签: angular radio-button disabled-input angular-reactive-forms

默认情况下如何禁用未选择的无线电苹果?

import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {FormBuilder, FormGroup, ReactiveFormsModule} from "@angular/forms"

@Component({
  selector: 'my-app',
  template: `

     <form [formGroup]="fbGroup">
      <div>
        <div *ngFor="let fruit of fruits">
          <input type="radio" 
            formControlName="afruit" [value]="fruit.value"/>
          <label>{{ fruit.label }}</label>
        </div>
      </div>
     </form>

    <div>{{fbGroup.value | json}}</div>

  `,
})
export class App {
  fbGroup: FormGroup;
  fruits = [{
    label: 'Apple',
    value: 'apple'
  }, {
    label: 'Banana',
    value: 'banana'
  }, {
    label: 'Orange',
    value: 'orange'
  }];

  constructor(_fb: FormBuilder) {
    this.fbGroup = _fb.group({
      afruit: ['banana']
    });
  // disable apple with banana selected as default
  }

}

@NgModule({
  imports: [ BrowserModule, ReactiveFormsModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

以下是plunkr

0 个答案:

没有答案