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链接。

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);
});

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

angular 2 Reactiveforms无法加载的无线电组

1 个答案: