CODEWITHSUNDEEP
angularangular2-forms
pantonis
pantonis

Reputation: 6507

angular 2 Reactiveforms radio groups not loading

I am trying to create a form with two radio button groups but I get nothing in the screen and no errors in console.

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

Here is the plnkr link.

Upvotes: 0

Views: 98

Answers (1)

Tiep Phan
Tiep Phan

Reputation: 12596

you made a typo mistake

change

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

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

to

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

Upvotes: 1

Related Questions