Question

我正在尝试使用单一形式的角度材料步进器，每一步都有许多无线电输入类型的问题：

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

在我的组件中：

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

然而onSubmit给了我所有单选按钮的空值，即使我选择了。我做错了什么？

Answer 1

您在模板驱动器表单中使用name="literacy"，以此名称创建FormControl。在模型驱动/活动表单中，您将字段分配给创建的FormControl，如formControlName="literacy"。所以尝试编辑它：

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

角度反应形式值未设定

1 个答案: