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" 。 這可能會解決問題