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

如何解决FormGroup.value 返回默认值而不是更新的值

我有一个小表格,点击一个按钮,我想访问表格的最新值。但我得到的是我初始化表单时使用的默认值。

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

component.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,weight: [this.data.weight,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>

解决方法

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 方法。

,

您的模板代码被 (valueChanges)="valueChanges('field')" 污染。只需从模板中删除它并使用反应式表单功能。使用 formControlName 作为您的输入,@atiyar 怎么说 (formControlName="YourFieldName")。

formform control 的新值可以使用它的 valueChanges 方法在您的控制器中捕获。

ngOnInit(): void {
  this.formGroup.valueChanges
     .pipe(distinctUntilChanged()) // used to be fired only for value changed
     .subscribe(value => {
        // value = all form fields
        // do something
     });
}

仅此而已。干净整洁。

,

您没有正确使用 formGroup。缺少表单元素的 formControlName 属性

HTML

    <h1 mat-dialog-title>Add Element</h1>
    <mat-dialog-content>
        <form [formGroup]="myForm">
            <mat-form-field appearance="fill" class="spacer">
                <mat-label>Position</mat-label>
                <input matInput type="number" name="position" formControlName="position" />
            </mat-form-field>
            <mat-form-field appearance="fill" class="spacer">
                <mat-label>Name</mat-label>
                <input matInput name="name" formControlName="name" />
            </mat-form-field>
            <mat-form-field appearance="fill" class="spacer">
                <mat-label>Weight</mat-label>
                <input matInput type="number" name="weight" step=".00001" formControlName="weight" />
            </mat-form-field>
            <mat-form-field appearance="fill" class="spacer">
                <mat-label>Symbol</mat-label>
                <input matInput name="symbol" formControlName="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>

TS


    public myForm: FormGroup;

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

        // listener for value change
        this.myForm.valueChanges.subscribe((data) => {
            console.log('onChange ===> ',data);
        });
    }

    save() {
        console.log('myForm ===> ',this.myForm);
        if (this.myForm.valid) {
            // api call to server or whatever you want to do with it
        }
    }

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其他元素将获得点击?
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。)
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么?
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么?
如何在Java中聆听按键时移动图像。
Java“Program to an interface”。这是什么意思?
Java在半透明框架/面板/组件上重新绘画。
Java“ Class.forName()”和“ Class.forName()。newInstance()”之间有什么区别?
在此环境中不提供编译器。也许是在JRE而不是JDK上运行?
Java用相同的方法在一个类中实现两个接口。哪种接口方法被覆盖?
Java 什么是Runtime.getRuntime()。totalMemory()和freeMemory()?
java.library.path中的java.lang.UnsatisfiedLinkError否*****。dll
JavaFX“位置是必需的。” 即使在同一包装中
Java 导入两个具有相同名称的类。怎么处理?
Java 是否应该在HttpServletResponse.getOutputStream()/。getWriter()上调用.close()?
Java RegEx元字符(。)和普通点?