我正在使用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
)的正确方法是什么?
答案 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')