Angular2 ReactiveFormsControl:如何绑定单选按钮?

时间:2016-10-20 14:09:06

标签: angular checkbox radio angular2-forms angular2-formbuilder

我正在使用Angular2的ReactiveFormsModule来创建包含表单的组件。这是我的代码:

foo.component.ts

constructor(fb: FormBuilder) {
    this.myForm = fb.group({
        'name': ['', Validators.required],
        'surname': ['', Validators.required],
        'gender': []
    });
}

foo.component.html

<div class="two fields">
    <div class="four wide field">
        <label>Name*</label>
        <input type="text" [formControl]="myForm.controls.name"/>
    </div>

    <div class="four wide field">
        <label>Surname*</label>
        <input type="text" [formControl]="myForm.controls.surname"/>
    </div>
</div>

<div class="inline fields">
    <label for="gender">Gender</label>
    <div class="field">
        <div class="ui radio checkbox">
            <input type="radio" name="gender" checked="" tabindex="0" class="hidden" [formControl]="myForm.controls.gender">
            <label>Male</label>
        </div>
    </div>
    <div class="field">
        <div class="ui radio checkbox">
            <input type="radio" name="gender" tabindex="0" class="hidden" [formControl]="myForm.controls.gender">
            <label>Female</label>
        </div>
    </div>
</div>

我上面发布的代码不起作用:如果我点击两个单选按钮中的一个,它总是选择第二个,我无法更改它。

FormControl使用radio(或checkbox)的正确方法是什么?

3 个答案:

答案 0 :(得分:5)

字符串值以外,您可以使用 [value] 属性,并且 [checked] 属性也应用于初始值。< / p>

export enum Gender {
  FEMALE = 1,
  MALE   = 2
}

export class SampleGenderComponent implements OnInit {

  public form: FormGroup;
  public Gender = Gender;

  constructor(fb: FormBuilder) {

    this.form = fb.group({
      gender    : [
        Gender.FEMALE,
        []
      ]
    });
  }
}
<div class="inline fields">
  <label for="gender">Gender</label>
  <div class="field">
    <div class="ui radio checkbox">
      <input type="radio" name="gender" [value]="Gender.MALE" [checked]="form.controls['gender'].value === Gender.MALE">
      <label>Male</label>
    </div>
  </div>
  <div class="field">
    <div class="ui radio checkbox">
      <input type="radio" name="gender" [value]="Gender.FEMALE" [checked]="form.controls['gender'].value === Gender.FEMALE">
      <label>Female</label>
    </div>
  </div>
</div>

答案 1 :(得分:2)

我解决了将value属性与相关值添加到radio元素:

<div class="inline fields">
    <label for="gender">Gender</label>
    <div class="field">
        <div class="ui radio checkbox">
            <input type="radio" name="gender" value="male" checked="" tabindex="0" class="hidden" [formControl]="myForm.controls.gender">
            <label>Male</label>
        </div>
    </div>
    <div class="field">
        <div class="ui radio checkbox">
            <input type="radio" name="gender" value="female" tabindex="0" class="hidden" [formControl]="myForm.controls.gender">
            <label>Female</label>
        </div>
    </div>
</div>

这使它适用于[formControl]formControlName。 (感谢@JsIsAwesome)

答案 2 :(得分:0)

将formControl更改为formControlName并设置控件名称。 并且不要忘记在表单标签中设置 [formGroup] =&#34; myForm&#34;

这很好用:

INSERT INTO Comp
values 
  ('Montreal','ABC'),
  ('QuebecCity','ABC'),
  ('Mont-tremblant','ABC'),
  ('Saint-donant','ABC'),
  ('Saint-savaure','ABC'),

  ('Montreal','QQQ'),
  ('QuebecCity','QQQ'),
  ('Mont-tremblant','QQQ'),
  ('Saint-donant','QQQ'),
  ('Saint-savaure','QQQ'),

  ('Montreal','www'),
  ('QuebecCity','www'),
  ('Mont-tremblant','www'),

  ('Montreal','dd'),
  ('QuebecCity','dd'),
  ('Mont-tremblant','dd'),
  ('Saint-donant','dd'),
  ('Saint-savaure','dd'),  
  ('trois rivieres','dd'),
  ('perce','dd'),

  ('City1','SSS'),
  ('City2','SSS'),
  ('City3','SSS'),
  ('City4','SSS'),
  ('Saint-savaure','SSS'),  
  ('City6','SSS'),
  ('City7','dd')