基于无线电按钮的角度禁用FormControl
基于无线电按钮的角度禁用FormControl
提问于 2019-05-01 19:38:09
在我的UI中，Angular2+ (角7)中的无线电按钮有问题。我正在尝试根据一个无线电按钮兄弟姐妹的FormGroup设置一个禁用的FormControl。
下面是我必须处理的限制因素。
- 有2组选项可供用户选择。
- 任何选项的组合都允许在同一集合内。
- 不允许同时在2组内选择选项。
- 应该从json中尽可能动态地创建表单。
示例：
- 法律选择： SetA:{“男性”：真，“女性”：假}，SetB：{“猫”：假，“狗”：假}
- 非法挑选： SetA：{“男性”：真，“女性”：假}，SetB：{“猫”：真，“狗”：假}
我的方法：
我想我会有一个无线电按钮为每组标题和禁用子项目选择时，无线电按钮没有选择，然后使用代码做设置任何子项目为假时，提交的表格。
我正在尝试使用反应形式，但这不是一个要求。
我是开放的任何重新设计，唯一在石头的要求是没有选择从2个或更多的类别同时。将来可能会有更多相互排斥的集合。
当前的UI，我必须重新实现的角度，只是使用所有的复选框，并弹出一个警报，如果用户试图提交无效的选择。我希望能做得更好。
问题
当我订阅无线电按钮的格式控制时，我的订阅函数打印的控制值总是“未定义”。
码
constructor( private fb: FormBuilder ) { }
ngOnInit( ) {
const fb = this.fb;
this.selectionForm = fb.group({
type2: fb.array([
fb.group({
// I'm using this control to store the label
char: new FormControl('gender') ,
// This one is the radiobutton
charSelected:new FormControl(false),
// these should be disabled unless charSelected=true
vals: fb.group({
male: new FormControl(false),
female: new FormControl(false)
})
}),
fb.group({
char: new FormControl('species') ,
//radiobutton
charSelected:new FormControl(''),
vals: fb.group({
cat: new FormControl(false),
dog: new FormControl(false)
})
})
])
});
}
public getTypeArray( typeName ){
return <FormArray>this.selectionForm.get(typeName);
}
public getGroupKeys( typeName , index ){
const type = <FormGroup>this.selectionForm.get([typeName,index,'vals']);
const keys = Object.keys(type.controls);
return keys;
}
public getLabel( typeName, index ){
const char = <FormControl>this.selectionForm.get([typeName,index,'char']);
return char.value;
}
// I was expecting to get True/False form this, but it comes back undefined
public subscribeParentSelected( control: FormControl ){
control.valueChanges.subscribe( val=>{
console.log( control.value );
console.log( val );
});
}模板
<div formArrayName="type2" class= "row">
<ng-container *ngFor="let a of getTypeArray('type2').controls; let i=index">
<div [formGroupName]="i" class="col">
<input formControlName="charSelected" type="radio" name="charSelected" (change)="changedRadio($event);">
<!--
<select formControlName="charSelected">
<option *ngFor="let c of "
</select>
<input formControlName="charSelected" type="radio" name="charSelected" (change)="changedRadio($event);">
-->
<b>{{ getLabel('type2',i) | titlecase }}</b>
<div formGroupName="vals" style="margin-left:20px;">
<ng-container *ngFor="let d of getGroupKeys('type2',i);">
<input [formControlName]="d" type="checkbox">{{d}}<br>
</ng-container>
</div>
</div>
</ng-container> 角信息
"@angular-devkit/architect": "0.13.0",
"@angular-devkit/build-optimizer": "0.13.0",
"@angular-devkit/build-webpack": "0.13.0",
"@angular-devkit/core": "7.3.0",
"@ngtools/webpack": "7.3.0",回答 1
Stack Overflow用户
发布于 2019-05-02 16:34:13
我重新组织了表单结构，将值绑定到form组，并添加了一个函数来检查表单状态以设置禁用的东西。
<input formControlName="selected" type="radio" value="{{ddChar.characteristic}}" (change)="updateType2()">页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55941729
复制相关文章
相似问题
腾讯云开发者
