提交后不重置角材料对话框表单

Question

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

 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, {
      ...