значение угловой реактивной формы не установлено - PullRequest
Новая
       23

значение угловой реактивной формы не установлено

0 голосов
/ 07 июня 2018

Я пытаюсь использовать угловой пошаговый материал с одной формой, на каждом шаге есть много вопросов о типе радиовхода: 

<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дает мне пустые значения для всех переключателей, даже если я выбрал.Что я делаю не так?

1 Ответ

0 голосов
/ 07 июня 2018

Вы используете 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>
...