angular reactive form value not set

Question

I am trying to use angular material stepper with a single form, each step has many radio input type questions:

<form [formGroup]="formGroup" (ngSubmit)="onSubmit()">
    <mat-vertical-stepper [linear]="isLinear">

        <!-- Sociaoeconomic attributes -->
        <mat-step formGroupName="groupOne" [stepControl]="groupOne" label="Step 1">
            <div class="example-selected-value">Education</div>
            <mat-radio-group required class="example-radio-group" name="education">
                <mat-radio-button class="example-radio-button" *ngFor="let choice of choices" [value]="choice">
                    {{choice}}
                </mat-radio-button>
            </mat-radio-group>
            <div class="example-selected-value">Literacy</div>
            <mat-radio-group required class="example-radio-group" name="literacy">
                <mat-radio-button class="example-radio-button" *ngFor="let choice of choices" [value]="choice">
                    {{choice}}
                </mat-radio-button>
            </mat-radio-group>
            <div>
                <button mat-button matStepperNext type="button">Next</button>
            </div>
        </mat-step>

        <!-- Personality variables -->
        <mat-step formGroupName="groupTwo" [stepControl]="groupTwo" label="Step 2">
            <div class="example-selected-value">Education</div>
            <mat-radio-group required class="example-radio-group" name="education">
                <mat-radio-button class="example-radio-button" *ngFor="let choice of choices" [value]="choice">
                    {{choice}}
                </mat-radio-button>
            </mat-radio-group>
            <div class="example-selected-value">Education</div>
            <mat-radio-group required class="example-radio-group" name="education">
                <mat-radio-button class="example-radio-button" *ngFor="let choice of choices" [value]="choice">
                    {{choice}}
                </mat-radio-button>
            </mat-radio-group>
            <div>
                <button mat-button matStepperPrevious type="button">Previous</button>
                <button mat-button matStepperNext type="button">Next</button>
            </div>
        </mat-step>


        <!-- Communication behavior -->
        <mat-step formGroupName="groupThree" [stepControl]="groupThree" label="Step 3">
            <div class="example-selected-value">Cosmopoliteness</div>
            <mat-radio-group required class="example-radio-group" name="cosmopoliteness">
                <mat-radio-button class="example-radio-button" *ngFor="let choice of choices" [value]="choice">
                    {{choice}}
                </mat-radio-button>
            </mat-radio-group>
            <div class="example-selected-value">oleadership</div>
            <mat-radio-group required class="example-radio-group" name="oleadership">
                <mat-radio-button class="example-radio-button" *ngFor="let choice of choices" [value]="choice">
                    {{choice}}
                </mat-radio-button>
            </mat-radio-group>
            <div>
                <button mat-button matStepperPrevious type="button">Previous</button>
                <button mat-button type="submit">Submit</button>
            </div>
        </mat-step>

    </mat-vertical-stepper>
</form>

And in my component:

isLinear = false;
formGroup: FormGroup;
choices : any =["Strongly disagree", "Disagree", "Neutral", "Agree", "Strongly agree"];

constructor(private _formBuilder: FormBuilder) { }

ngOnInit() {
    this.formGroup = this._formBuilder.group({
        groupOne: this._formBuilder.group({
            education: [''],
            literacy:['']
        }),
        groupTwo: this._formBuilder.group({
            empathy: [''],
            rationslity: ['']
        }),
        groupThree: this._formBuilder.group({
            cosmopliteness: [''],
            oleadership:['']
        }),
    });
}


onSubmit(){
    console.log(this.formGroup.value);
}

However onSubmit gives me empty values for all radio buttons, even though I selected. What am I doing wrong?

Julius Dzidzevičius · Accepted Answer · 2018-06-07 09:54:48Z

1

You use name="literacy" in Template drive form, to create a FormControl under this name. In Model driven / Reactive form, you assign field to the created FormControl like formControlName="literacy". So try to edit it:

<div class="example-selected-value">Education</div>
<mat-radio-group required class="example-radio-group" formControlName="education">
    <mat-radio-button class="example-radio-button" *ngFor="let choice of choices" [value]="choice">
        {{choice}}
    </mat-radio-button>
</mat-radio-group>
<div class="example-selected-value">Literacy</div>
<mat-radio-group required class="example-radio-group" formControlName="literacy">
    <mat-radio-button class="example-radio-button" *ngFor="let choice of choices" [value]="choice">
        {{choice}}
    </mat-radio-button>
</mat-radio-group>
<div>

answered Jun 7, 2018 at 9:54

Julius Dzidzevičius

11k11 gold badges41 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

angular reactive form value not set

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related