angular2 model driven form radio button issue

Question

I'm having an issue getting radio buttons to work properly in my reactive form. Here is my component code:

export class SettingsFormComponent implements OnInit {

    public sForm: FormGroup;
    public submitted: boolean;
    diagramSettings: DiagramSettings;


    constructor(private _formBuilder: FormBuilder, private _settingsService: SettingsService) {

        this._settingsService.diagramSettingsSubject.subscribe((dSettings: DiagramSettings) => {
            this.diagramSettings = dSettings;
        });


        this.sForm = new FormGroup({
            hoverDelay: new FormControl('', [<any>Validators.required, CustomValidators.range([500, 2000])]),
            hoverAction: new FormControl('', []),
            leftClickAction: new FormControl('', []),
            rightClickAction: new FormControl('',[])
        });

        this.sForm.setValue({
            hoverDelay: this.diagramSettings.hoverDelay,
            hoverAction: this.diagramSettings.OnHover,
            leftClickAction: this.diagramSettings.OnLeftClick,
            rightClickAction: this.diagramSettings.OnRightClick
        });

        //this.sForm = new FormGroup({
        //    hoverDelay: new FormControl(500, [<any>Validators.required, <any>Validators.minLength(3)])
        //});

    }

    ngOnInit() {

    }

    save() {

        this.submitted = true; // set form submit to true

        this._settingsService.setOpen(false);

        // check if model is valid
        // if valid, call API to save customer
        console.log('in model save. ');
    }

}

Here is a portion of my template containing the form:

<form [formGroup]="sForm" novalidate (ngSubmit)="save()">

    <div class="form-group" [class.has-error]="!sForm.controls.hoverDelay.valid">
        <label class="col-sm-2 control-label" for="hoverDelay">Hover Delay (millilseconds):</label>
        <div class="col-sm-10">
            <input formControlName="hoverDelay" id="hoverDelay" type="text" class="form-control">
        </div>
        <span [hidden]="sForm.controls.hoverDelay.valid" [class.help-block]="!sForm.controls.hoverDelay.valid">
            HoverDelay is required and needs to be between 500 - 2000
        </span>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label" for="hoverActionGroup">On Hover:</label>
        <div class="btn-group" id="hoverActionGroup" data-toggle="buttons">
            <label class="btn btn-primary" [class.active]="sForm.value.hoverAction === 1">
                <input type="radio"  name="hoverAction" value="1" formControlName="hoverAction" />Modal
            </label>
            <label class="btn btn-primary" [class.active]="sForm.value.hoverAction === 2">
                <input type="radio" name="hoverAction"  value="2" formControlName="hoverAction" />Navigate
            </label>
            <label class="btn btn-primary" [class.active]="sForm.value.hoverAction === 0">
                <input type="radio"  name="hoverAction" value="0" formControlName="hoverAction" />Do Nothing
            </label>
        </div>
    </div>

The UI radio buttons seem to work, when you toggle between them only one is checked etc. The issue is that it doesn't seem to be bound to my hoverAction formControl, because that value is always ===0 (which is the value it is initialized to). The hoverDelay text input is being bound to the form control and updated appropriately, so I must be dorking something up with the radio buttons.

How do you use radio buttons with angular2 reactive forms?

Could you recreate the issue in a plunker? I couldn't reproduce your issue myself with your code :) — AJT82

Syntactic Fructose Syntactic Fructose · Accepted Answer · 2017-03-27T17:44:21

The [class] binding is for applying and removing css styles[1], so I don't think you can execute any logic inside that. You should use a (click) event instead:

    <label class="btn btn-primary" (click)="sForm.value.hoverAction === 1">
        <input type="radio"  name="hoverAction" value="1" formControlName="hoverAction" />Modal
    </label>
    <label class="btn btn-primary" (click)="sForm.value.hoverAction === 2">
        <input type="radio" name="hoverAction"  value="2" formControlName="hoverAction" />Navigate
    </label>
    <label class="btn btn-primary" (click)="sForm.value.hoverAction === 0">
        <input type="radio"  name="hoverAction" value="0" formControlName="hoverAction" />Do Nothing
    </label>

angular2 model driven form radio button issue

1 Answers