Question

在我的UI中，Angular2 +（Angular 7）中的单选按钮遇到了麻烦。我正在尝试根据单选按钮同级FormControl将FormGroup设置为禁用。

这是我必须处理的约束。

有2组选项可供用户选择。
同一组中允许使用任何选项组合
不允许同时选择2套内的选项
应该从json api尽可能动态地创建表单

示例：

法律选择：

SetA：{“ male”：true，“ female”：false}，SetB：{“ cat”：false，“ dog”：false“}
非法选择：

SetA：{“ male”：true，“ female”：false}，SetB：{“ cat”：true，“ dog”：false“}

我的方法：

我想我将为每个标题设置一个单选按钮，并在未选中该单选按钮时禁用子项选择，然后在提交表单时使用代码将所有子项设置为false。

我正在尝试使用反应形式，但这不是必须的。

我愿意进行任何重新设计，唯一需要满足的条件是不要同时从2个或更多类别中进行选择。将来可能会有更多互斥的集。

我必须在Angular中重新实现的当前UI仅使用所有复选框，并在用户尝试提交无效选择时弹出警报，提示您。我希望做得更好。

问题

当我订阅单选按钮的formcontrol时，我的subscribe函数打印的控件值始终是“ undefined”。

代码

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",

Answer 1

我重新组织了表单结构，将一个值绑定到表单组，并添加了一个检查表单状态以将其禁用的功能。

<input formControlName="selected" type="radio" value="{{ddChar.characteristic}}" (change)="updateType2()">

基于单选按钮的角度禁用FormControl

1 个答案: