提交后角材料对话框表格未重置

问题描述

我有一个要求，在标题导航中必须有一个模型弹出窗口。我正在为弹出模型使用角度材质对话框。模型弹出窗口仅在我当前面临的一个问题上工作良好。如果我关闭模型并重新打开，则表单值不会重置。

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,Inject,ViewChild } from '@angular/core';
import { MatDialog,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（）中重置表单。但是它不起作用。 谁能让我知道我在哪里错了？谢谢。

解决方法

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

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