Angular 反应式重置

Question

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

我想在阅读后重置 forms，但由于某种原因，它会在控制台日志之前清除。

我尝试使用 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

我想在阅读后重置 forms，但由于某种原因，它会在控制台日志之前清除。

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

对于您的主要问题：

<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 材料 github 回购中有一个未解决的问题。 您可以在此处阅读更多相关信息。 它已于2017年4月21日开业。

Answer 2

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