角度反應形式重置

我正在學習角度并且在角度反應形式方面存在一些問題。

我想在閱讀后重置表格，但由于某種原因它在控制臺日志之前清除。

我嘗試將 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 >

    <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>

提交后的圖片：

uj5u.com熱心網友回復：

我想在閱讀后重置表格，但由于某種原因它在控制臺日志之前清除。

Console.log 將記錄您的表單，之后的重置方法將重置它。然而，通過 console.log 檢查物件以異步方式發生。控制臺同步接收對物件的參考，但在物件展開之前不會顯示物件的屬性（在某些情況下，取決于瀏覽器以及日志發生時是否打開了開發工具）。如果物件在控制臺中檢查之前已被修改，則顯示的資料將具有更新的值。

對于您的主要問題：

<mat-error>檢查 FormGroupDirective 的有效性，而不是FormGroup，并且重置FormGroup不會重置FormGroupDirective。

這有點不方便，但要清除，<mat-error>您還需要重置FormGroupDirective。

在您的模板中：

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

在您的組件類中

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

目前在 Angular 材料 github 存盤庫中有一個未解決的問題。你可以在這里閱讀更多關于它的資訊。它已于 2017 年 4 月 21 日開放。

uj5u.com熱心網友回復：

在表單標簽上，嘗試添加(ngSubmit)="onSubmit()"按鈕并將其更改為type="submit". 這可能會解決問題

標籤：有角度的 形式

上一篇：如果資料尚未更新，則不顯示成功訊息naformlaravel

下一篇：在條件部分中點擊文本欄位時應用程式凍結