Angular 反应式表格重置

Question

我正在学习 angular 并且在使用 angular 反应形式时遇到了一些问题。

我想在阅读后重置表格，但由于某种原因，它在控制台日志之前就被清除了。

我尝试使用 ngSubmit="onSubmit()" 和按钮 type="reset" 但它是一样的。由于某种原因，值被重置但验证器仍然被触及（提交后，所有必填字段出现错误）

我的代码：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, NgForm, Validators } from '@angular/forms';

@Component({
  selector: 'app-deals',
  templateUrl: './deals.component.html',
  styleUrls: ['./deals.component.css']
})
export class DealsComponent implements OnInit {

  dealsForm!:FormGroup;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit(): void {

        this.dealsForm = this.formBuilder.group(
            {'meio': [null, Validators.required],
            'mes': [null,[Validators.required],],
            'gender': ['male'],
            'files':[null]}
        );
  }
    
    onSubmit(){
            console.log(this.dealsForm)
            this.dealsForm.reset()
    }
}

Html:

<div class="container">

    <h1>Upload Deals</h1>

    <form [formGroup]="dealsForm">

        <div>
            <mat-form-field appearance="outline">
                <mat-label>Meio</mat-label>

                <mat-select formControlName="meio">
                    <mat-option value="otv"> OTV </mat-option>
                    <mat-option value="ptv"> PTV </mat-option>
                    <mat-option value="radio"> Radio </mat-option>
                    <mat-option value="ooh"> OOH </mat-option>
                </mat-select>
                <mat-error>Selecione uma opção</mat-error>
            </mat-form-field>
        </div>

        <div>
            <mat-form-field appearance="outline">
                <mat-label>Mês</mat-label>
                <mat-select formControlName="mes">
                    <mat-option value=1> Janeiro </mat-option>
                    <mat-option value=2> Fevereiro </mat-option>
                    <mat-option value=3> Março </mat-option>
                    <mat-option value=4> Abril </mat-option>
                    <mat-option value=5> Maio </mat-option>
                    <mat-option value=6> Junho </mat-option>
                    <mat-option value=7> Julho </mat-option>
                    <mat-option value=8> Agosto </mat-option>
                    <mat-option value=9> Setembro </mat-option>
                    <mat-option value=10> Outubro </mat-option>
                    <mat-option value=11> Novembro </mat-option>
                    <mat-option value=12> Dezembro </mat-option>
                </mat-select>
            </mat-form-field>
        </div>

        <div>
            <input type="file" formControlName="files">
        </div>
        
        <button mat-raised-button 
                        (click)="onSubmit()"
                        [disabled]='!dealsForm.valid'
                        >Enviar</button>


    </form>

</div>

提交后的图片：

Answer 1

在表单标签上，尝试添加 (ngSubmit)="onSubmit()" 并将按钮更改为 type="submit"。这可能会解决问题

Answer 2

I want to reset the forms after i read it, but for some reason it clears before console log.

Console.log 将记录您的表单，此后的重置方法将重置它。然而，通过 console.log 检查对象是以异步方式发生的。控制台同步接收对对象的引用，但在展开之前不会显示对象的属性（在某些情况下，取决于浏览器以及日志发生时您是否打开了开发工具）。如果对象在控制台中检查之前已被修改，则显示的数据将具有更新后的值。

针对您的主要问题：

<mat-error> 检查 FormGroupDirective 的有效性，而不是 FormGroup，并重置 FormGroup 不重置 FormGroupDirective.

有点不方便，但是要清除 <mat-error> 您还需要重置 FormGroupDirective。

在您的模板中：

<form [formGroup]="dealsForm" #formDirective="ngForm" 
  (ngSubmit)="submitForm(formDirective)">

在你的组件中class

onSubmit(formDirective){
   console.log(this.dealsForm)
   formDirective.resetForm()
   this.dealsForm.reset()
}

目前在 Angular material github 存储库中有一个未解决的问题。您可以阅读更多相关信息 HERE。已于2017年4月21日开业。

Angular 反应式表格重置

Angular Reactive Form Reset

forms

angular