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

Question

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

这是我必须处理的限制条件。

• 允许用户选择两组选项。
• 同一集合中允许任意组合选项
• 不允许同时选择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 仅使用所有复选框，并在用户尝试提交无效选择时弹出警告抱怨。我希望做得更好。

问题

当我订阅单选按钮的表单控件时，我的订阅函数打印的控件值总是“未定义”。

代码

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()">