Angular material 对话框表单在提交后未重置

Question

我有一个要求，在 header 导航中有一个模型弹出窗口。我正在为弹出模型使用 angular material 对话框。模型弹出窗口工作正常，只有我目前面临的一个问题。如果我关闭模型并重新打开它，则不会重置表单值。

header.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA, MatDialogConfig } from '@angular/material/dialog';
import { ModelComponent } from '../model/model.component';
import { Subscription } from 'rxjs';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
  @ViewChild('modelForm', {static: false}) modelForm: NgForm;

  firstName: string = '';
  lastName: string = '';
  dialogConfig: MatDialogConfig;
  dialogWithForm: MatDialogRef<ModelComponent>;
  routeQueryParams$: Subscription;

  constructor( private router: Router, public dialog: MatDialog, private route: ActivatedRoute,) { 
    this.routeQueryParams$ = route.queryParams.subscribe(params => {
      if (params['dialog']) {
        // this.openDialog();
        this.showDialog();
      }
    });
  }

  ngOnInit(): void {
    // this.modelForm.resetForm();
    }
  
  showDialog(){
    // Opening the dialog component
    const dialogWithForm = this.dialog.open(ModelComponent, {
      width: '40%',
      // height: '400px',
      data: { firstName: this.firstName, lastName: this.lastName }
      });

    // When user close the dialog
    dialogWithForm.afterClosed().subscribe(result => {
      console.log('You have closed the dialog');
      if (result) {
        // this.modelForm.resetForm();
        this.router.navigate(['/test'], { relativeTo: this.route });
        // this.modelForm.resetForm();
        // this.modelForm.reset();
      }
        // this.modelForm.resetForm();
        // this.dialogWithForm.close([]);
        // this.dialogWithForm.close(this.modelForm.value);
        this.dialogWithForm.close();

    });
    // this.modelForm.reset();

  }
  
  ngOnDestroy() {
    this.routeQueryParams$.unsubscribe();
  }
}

model.component.ts

import { Component, OnInit, Inject, ViewChild } from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { Router } from '@angular/router';
import { NgForm } from '@angular/forms';

export interface DialogData {
  firstName: string;
  lastName: string;
 }

@Component({
  selector: 'app-model',
  templateUrl: './model.component.html',
  styleUrls: ['./model.component.css']
})
export class ModelComponent implements OnInit {
  @ViewChild('modelForm', {static: false}) modelForm: NgForm;
  firstName: string = '';
  lastName: string = '';

  constructor(private router: Router, public dialogRef: MatDialogRef<ModelComponent>, @Inject(MAT_DIALOG_DATA) public data: DialogData) { }

  ngOnInit(): void {
    // this.modelForm.reset();
  }
  onNoClick(): void {
    this.dialogRef.close();
    this.router.navigateByUrl('/contact');
  }

}

header.component.html


                <a class="nav-link" routerLinkActive="active"  routerLink="/queries" [queryParams]="{dialog: true}">Connections</a>
     


model.component.html
 
 <form #modelForm="ngForm" id="modelForm" (ngSubmit)="onSend(modelForm)"> 
<div class="header">  
    <h2 mat-dialog-title>Create Modekl</h2>
</div>
<div mat-dialog-content>
    <mat-form-field>
    <input placeholder="First Name" matInput [(ngModel)]="data.firstName" name="firstName" required>
    </mat-form-field><br>
    <mat-form-field>
    <input placeholder="Last Name" matInput [(ngModel)]="data.lastName" name="lastName" required>
    </mat-form-field><br>
</div>
<div mat-dialog-actions>
    <button mat-button (click)="onNoClick()" class="btn btn-primary run-button">Cancel</button>
    <button mat-button [mat-dialog-close]="data" class="btn btn-primary run-button" [disabled]="modelForm.invalid">Create</button>
</div>
</form>

我尝试在 ngOnInit 和 afterClosed() 中重置表单。但它不起作用。任何人都可以让我知道我哪里出错了吗？谢谢

Answer 1

您将数据绑定到输入字段而不是表单，因此您必须重置这些值。如果您希望对话框在显示时为“空”，您可以在打开之前重置值，例如：

  showDialog(){
    this.firstName = "";
    this.lastName = "";
    // Opening the dialog component
    const dialogWithForm = this.dialog.open(ModelComponent, {
      ...

Angular material 对话框表单在提交后未重置

Angular material dialog form is not resetting after submit

angular

modal-dialog

reset