Angular实现日期触发表单数组与列表联动的方法

需求说明 #

修改日期输入框的值时，同步更新FormArray中对应表单的日期字段，并根据选定日期刷新关联的列表数据。

修正后的代码实现 #

HTML部分 #

<td>
  <input matInput type="date" 
         formControlName="asOfDate" 
         class="form-control"  
         (ngModelChange)="onValueChange($event)">
</td>

组件TS部分 #

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
import { YourService } from './your-service.service';
import { myDTO } from './your-dto.interface';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  fg!: FormGroup;
  asOfDate: string = new Date().toISOString().substring(0, 10);
  myDTO: any[] = [];

  constructor(private fb: FormBuilder, private services: YourService) {}

  ngOnInit(): void {
    this.fg = this.fb.group({
      name: [],
      array: this.fb.array([this.createGroup()])
    });
    this.getList();
  }

  createGroup(): FormGroup {
    return this.fb.group({
      asOfDate: [this.asOfDate],
      listItem: []
    });
  }

  get formArray(): FormArray {
    return this.fg.get('array') as FormArray;
  }

  onValueChange(value: string): void {
    this.asOfDate = value;
    // 同步更新FormArray中所有表单组的日期字段
    this.formArray.controls.forEach(control => {
      control.patchValue({ asOfDate: value });
    });
    this.getList();
  }

  getList(): void {
    this.services.LookUpList(5, 1, this.asOfDate).subscribe((response: myDTO) => {
      this.myDTO = response.items;
      console.log('列表数据:', response);
    }, error => {
      console.error('加载列表失败:', error);
    });
  }
}

服务TS部分 #

import { Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { appsetting } from './appsetting';
import { Observable } from 'rxjs';
import { myDTO } from './your-dto.interface';

@Injectable({
  providedIn: 'root'
})
export class YourService {
  constructor(private http: HttpClient) {}

  LookUpList(size: number, index: number, asOfDate: string): Observable<myDTO> {
    let params = new HttpParams()
      .append('Size', size.toString())
      .append('Index', index.toString())
      .append('asOfDate', asOfDate);

    return this.http.get<myDTO>(`${appsetting.baseURL}MyList/listforcreation`, { params });
  }
}

关键修正点说明 #

• 表单初始化修正：原代码未调用createGroup方法，改为this.createGroup()生成FormGroup实例。
• 字段名统一：将表单组字段asOfdate改为asOfDate，与输入框formControlName保持一致，避免绑定失败。
• 表单值同步：在onValueChange中通过patchValue更新FormArray中所有表单组的日期字段，实现输入框与表单值同步。
• 列表触发刷新：日期变更时直接调用getList()，确保数据实时更新。
• 服务参数修正：将asOfDate参数类型从number改为string，匹配日期输入框返回的YYYY-MM-DD格式字符串。
• 数据处理优化：移除多余的JSON.parse(JSON.stringify(...))，直接使用response.items。

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