Angular模态框如何将输入数值传递至外部表单输入框

需要实现一个带快捷按钮和手动输入的Angular模态框，提交后将输入的时长数值同步到模态框外的输入框，用于设置激活时长。当前存在两个问题：手动输入时获取的数值为null，且无法将数值传递到外部输入框，仅能通过console.log查看。

问题根源分析 #

1. 表单绑定错误：模态框模板中formGroup="timerForm"是字符串绑定，而非表单实例绑定，导致表单无法正确追踪输入值。
2. 表单值更新方式错误：直接修改this.timerForm.value.timer不会触发Angular表单的变更检测，表单值无法正确更新。
3. 未传递数据到外部：关闭模态框时没有将表单数据作为参数传递出去，父组件无法接收。
4. 冗余属性冲突：输入框同时使用formControlName和[value]，导致双向绑定失效。

修正后的完整代码 #

1. 模态框组件（DialogAnimationsExampleDialog） #

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { MatDialogRef } from '@angular/material/dialog';

@Component({
  selector: 'dialog-animations-example-dialog',
  templateUrl: 'dialog-animations-example-dialog.html',
})
export class DialogAnimationsExampleDialog implements OnInit{
  public timerForm: FormGroup = new FormGroup({
    timer: new FormControl(null)
  });

  constructor(public dialogRef: MatDialogRef<DialogAnimationsExampleDialog>) {}

  ngOnInit(): void {}

  // 快捷按钮设置时长
  public clickButton(num: number) {
    // 使用setValue更新表单值，触发变更检测
    this.timerForm.get('timer')?.setValue(num);
  }

  // 提交并关闭模态框，传递表单数据
  public handleClose(){
    // 将表单中的timer值作为参数传递给父组件
    this.dialogRef.close(this.timerForm.value.timer);
  }
}

2. 模态框模板（dialog-animations-example-dialog.html） #

<h1 mat-dialog-title>Choose Target Time</h1>
<div mat-dialog-content>
  <button
    (click)="clickButton(60)"
    class="bg-green-400 hover:bg-green-300 cursor-pointer w-10 h-10 rounded-md mx-2"
  >
    60
  </button>
  <button
    (click)="clickButton(120)"
    class="bg-green-400 hover:bg-green-300 cursor-pointer w-10 h-10 rounded-md mx-2"
  >
    120
  </button>
  <button
    (click)="clickButton(180)"
    class="bg-green-400 hover:bg-green-300 cursor-pointer w-10 h-10 rounded-md mx-2"
  >
    180
  </button>
  <button
    (click)="clickButton(240)"
    class="bg-green-400 hover:bg-green-300 cursor-pointer w-10 h-10 rounded-md mx-2"
  >
    240
  </button>

  <!-- 修正formGroup绑定为[]语法，绑定到表单实例 -->
  <form class="p-1" [formGroup]="timerForm">
    <div class="mb-2">Target Time (minutes)</div>
    <div>
      <!-- 移除[value]，formControlName已实现双向绑定 -->
      <input
        class="border-2 mt-3 w-full px-3 py-1 rounded-md"
        formControlName="timer"
        type="number"
        placeholder="time charging on minutes"
      />
    </div>
  </form>

  <button type="submit" (click)="handleClose()" mat-button>Submit</button>
</div>

3. 父组件实现（同步数值到外部输入框） #

父组件模板

<div class="flex flex-col  w-full justify-center my-2" *ngIf="status === 'Preparing'">
  <button mat-raised-button (click)="openDialog()">Input Target Time ( Button )</button>
  <!-- 外部输入框，绑定到父组件的targetTime变量 -->
  <input 
    type="number" 
    placeholder="外部激活时长输入框" 
    [(ngModel)]="targetTime"
    class="border-2 mt-3 w-full px-3 py-1 rounded-md text-black"
  />
</div>

父组件逻辑

import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { DialogAnimationsExampleDialog } from './dialog-animations-example-dialog.component';

@Component({
  selector: 'app-parent-component',
  templateUrl: './parent-component.html',
})
export class ParentComponent {
  status = 'Preparing';
  targetTime: number | null = null;

  constructor(private dialog: MatDialog) {}

  openDialog() {
    const dialogRef = this.dialog.open(DialogAnimationsExampleDialog, {
      width: '400px',
    });

    // 订阅模态框关闭事件，接收返回的数值
    dialogRef.afterClosed().subscribe(result => {
      if (result !== undefined) {
        // 将返回的数值同步到外部输入框的绑定变量
        this.targetTime = result;
      }
    });
  }
}

关键实现说明 #

• 表单绑定修正：使用[formGroup]="timerForm"将表单模板与组件中的FormGroup实例绑定，确保表单能正确追踪输入值。
• 表单值更新：使用setValue或patchValue更新表单控件值，触发Angular的变更检测，确保表单值实时同步。
• 数据传递：关闭模态框时通过dialogRef.close(data)将数据传递给父组件，父组件通过afterClosed()订阅接收数据。
• 双向绑定简化：移除输入框的[value]属性，formControlName已实现表单控件与模板的双向绑定，避免冲突。

内容的提问来源于stack exchange，提问作者Jansen Su