angular 2 个 Reactiveforms 无线电组未加载

Question

我正在尝试创建一个包含两个单选按钮组的表单，但屏幕上什么也没有，控制台也没有任何错误。

    <div class="portlet light bordered">
        <form [formGroup]="serversMachinesFormGroup" class="form" *ngIf="serversMachinesFormGroup">
            <div [formGroup]="machinesFormGroup" class="btn-group btn-group-circle margin-right-40" data-toggle="buttons">
                <label class="btn active bnt-group-override margin-left-0">
                    <input type="radio" class="toggle" value="1" formControlName="buttonsMachine"> Machine 1 
                </label>
                <label class="btn bnt-group-override margin-left-0">
                    <input type="radio" class="toggle" value="2" formControlName="buttonsMachine"> Machine 2
                </label>
            </div>
            <div [formGroup]="serversFormGroup" class="btn-group btn-group-circle" data-toggle="buttons">
                <label class="btn bnt-group-override active">
                    <input type="radio" class="toggle" value="1" formControlName="buttonsServer"> Serv 1 
                </label>
                <label class="btn bnt-group-override margin-left-0">
                    <input type="radio" class="toggle" value="2" formControlName="buttonsServer"> Serv 2
                </label>
                <label class="btn bnt-group-override margin-left-0">
                    <input type="radio" class="toggle" value="3" formControlName="buttonsServer"> Serv 3
                </label>
            </div>
        </form>
    </div>

这里是 plnkr link.

Answer 1

你打错了

改变

this.serversmachinesFormGroup= new FormGroup({
  machinesFormGroup: this.machinesFormGroup,
  serversFormGroup: this.serversFormGroup,
});

this.serversmachinesFormGroup.valueChanges.subscribe(value => {
  console.log(value);
});

到

this.serversMachinesFormGroup = new FormGroup({
  machinesFormGroup: this.machinesFormGroup,
  serversFormGroup: this.serversFormGroup,
});

this.serversMachinesFormGroup.valueChanges.subscribe(value => {
  console.log(value);
});

笨蛋： https://plnkr.co/edit/ZhhOHPZb1JHjVeNsZU6M?p=preview

angular 2 个 Reactiveforms 无线电组未加载

angular 2 Reactiveforms radio groups not loading

angular2-forms

angular