Angular 5+表单ngModel值丢失（基于Alexander Leonov答案更新仍有问题）

看起来你遇到的核心问题是表单的数组字段（snippets）无法通过form.reset(t)自动填充——这其实是Angular表单处理嵌套数组时的常见坑，因为reset()方法对于FormArray类型的控件，不会自动帮你初始化数组内的子控件，只会尝试赋值，但如果控件结构没匹配上，数据就绑定不上。

先给你拆解下原因和解决步骤：

1. 先确认你的表单结构是否正确 #

首先，你的表单必须明确声明snippets是一个FormArray，而不是普通的FormControl。假设你的数据结构（Structure A）是类似这样的：

interface Tile {
  title: string;
  description: string;
  snippets: Array<{ id: number; content: string }>; // 示例数组结构
}

那在构建表单的时候，要把snippets定义为FormArray：

import { FormBuilder, FormGroup, FormArray } from '@angular/forms';

// 在组件类里
constructor(private fb: FormBuilder) {}

myForm: FormGroup;

ngOnInit() {
  this.myForm = this.fb.group({
    title: ['', Validators.required],
    description: [''],
    snippets: this.fb.array([]) // 初始化空的FormArray
  });
}

// 给模板用的getter，方便获取snippets数组控件
get snippetsArray(): FormArray {
  return this.myForm.get('snippets') as FormArray;
}

2. 重写currentTile方法，手动处理数组填充 #

不要再直接用form.reset(t)来处理整个对象，而是拆分处理：基础字段用patchValue，数组字段手动创建子控件并赋值：

currentTile(t: Tile) {
  // 先重置并填充title和description这类普通字段
  this.myForm.patchValue({
    title: t.title,
    description: t.description
  });

  // 处理snippets数组
  const snippetsCtrl = this.snippetsArray;
  // 先清空现有控件，避免旧数据残留
  snippetsCtrl.clear();

  // 遍历传入的snippets数据，逐个创建FormGroup并加入数组
  t.snippets.forEach(snippet => {
    snippetsCtrl.push(this.fb.group({
      id: [snippet.id],
      content: [snippet.content]
    }));
  });
}

3. 模板里的绑定要匹配FormArray结构 #

确保模板中snippets部分的绑定是基于FormArray的控件循环，而不是直接绑定到对象数组：

<form [formGroup]="myForm">
  <!-- title和description的绑定正常写 -->
  <input formControlName="title" placeholder="Title">
  <textarea formControlName="description" placeholder="Description"></textarea>

  <!-- snippets数组的绑定 -->
  <div formArrayName="snippets">
    <div *ngFor="let snippetCtrl of snippetsArray.controls; let i = index" 
         [formGroupName]="i">
      <input formControlName="content" placeholder="Snippet content">
      <!-- 如果需要显示id，也可以绑定formControlName="id" -->
    </div>
  </div>
</form>

为什么之前的form.reset(t)不行？因为Angular的FormArray需要明确的子控件（每个FormGroup或FormControl）才能绑定数据，reset()只会把值传给数组，但不会自动帮你创建对应的子控件，所以模板里的ngModel自然拿不到数据。

这样调整后，点击列表项调用currentTile时，snippets字段就能正常填充了。

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