时间戳

首页 > 解决方案 > FormGroup.value 返回默认值而不是更新的值

angular - FormGroup.value 返回默认值而不是更新的值

问题描述

我有一个小表单，单击一个按钮我想访问表单的最新值。但我得到的是我初始化表单的默认值。

我正在使用材料来设计输入字段

组件.ts

import { Component, EventEmitter, Inject, OnInit, Output } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { ElementService } from 'src/app/services/element.service';

import { PeriodicElement } from '../../../Interfaces/periodicElement';

@Component({
    selector: 'app-create',
    templateUrl: './create.component.html',
    styleUrls: ['./create.component.css']
})

export class CreateComponent {

    formGroup: FormGroup;
    inProgress: boolean = false;
    onChange = (_: any) => { };

    constructor(
        private elementService: ElementService,
        private formBuilder: FormBuilder,
        public dialogRef: MatDialogRef<CreateComponent>,
        @Inject(MAT_DIALOG_DATA) public data: PeriodicElement
    ) {
        this.formGroup = this.formBuilder.group({
            position: [this.data.position, Validators.required],
            name: [this.data.name, Validators.required],
            weight: [this.data.weight, Validators.required],
            symbol: [this.data.symbol, Validators.required]
        });
    }

    valueChanges(controlGroup: string) {
        let value = this.formGroup.get(controlGroup)?.value;
        this.onChange(value);
    }

    save() {
        console.log(this.formGroup.value)
        this.inProgress = true;
        this.elementService.list().subscribe(list => {
            this.inProgress = false;
            this.dialogRef.close(list);
        });

    }
}

组件.html

<h1 mat-dialog-title>Add Element</h1>
<mat-dialog-content>
    <form [formGroup]="formGroup">
        <mat-form-field appearance="fill" class="spacer">
            <mat-label>Position</mat-label>
            <input matInput type="number" [value]="data.position" (valueChanges)="valueChanges('position')" />
        </mat-form-field>
        <mat-form-field appearance="fill" class="spacer">
            <mat-label>Name</mat-label>
            <input matInput [value]="data.name" (valueChanges)="valueChanges('name')" />
        </mat-form-field>
        <mat-form-field appearance="fill" class="spacer">
            <mat-label>Weight</mat-label>
            <input matInput type="number" [value]="data.weight" step=".00001" (valueChanges)="valueChanges('weight')" />
        </mat-form-field>
        <mat-form-field appearance="fill" class="spacer">
            <mat-label>Symbol</mat-label>
            <input matInput [value]="data.symbol" (valueChanges)="valueChanges('symbol')" />
        </mat-form-field>
    </form>
</mat-dialog-content>
<mat-dialog-actions align=end>
    <mat-spinner [diameter]="20" *ngIf="inProgress"></mat-spinner>
    <button color="accent" mat-raised-button (click)="save()">Add</button>
    <button color="warn" mat-raised-button mat-dialog-close>Cancel</button>
</mat-dialog-actions>

标签： angularangular-reactive-formsangular-forms

解决方案

修改component.html为 -

<h1 mat-dialog-title>Add Element</h1>
<mat-dialog-content>
    <form [formGroup]="formGroup">
        <mat-form-field appearance="fill" class="spacer">
            <mat-label>Position</mat-label>
            <input matInput type="number" formControlName="position" />
        </mat-form-field>
        <mat-form-field appearance="fill" class="spacer">
            <mat-label>Name</mat-label>
            <input matInput formControlName="name" />
        </mat-form-field>
        <mat-form-field appearance="fill" class="spacer">
            <mat-label>Weight</mat-label>
            <input matInput type="number" step=".00001" formControlName="weight" />
        </mat-form-field>
        <mat-form-field appearance="fill" class="spacer">
            <mat-label>Symbol</mat-label>
            <input matInput formControlName="symbol" />
        </mat-form-field>
    </form>
</mat-dialog-content>
<mat-dialog-actions align=end>
    <button color="accent" mat-raised-button (click)="save()">Add</button>
    <button color="warn" mat-raised-button mat-dialog-close>Cancel</button>
</mat-dialog-actions>

并且您不再需要该onChange属性和valueChanges()方法component.ts。

推荐阅读