Angular Material MatInput值不显示及formControlName失效问题求助

嘿，我一眼就发现问题所在啦！你的输入框绑定失效、值不显示，核心是formControlName的用法错了，再结合几个细节调整就能搞定👇

问题根源拆解 #

1. formControlName绑定错误：你写的formControlName=i会被Angular当成是绑定名为"i"的控件，而不是对应数组索引的控件。要绑定变量索引，必须用方括号包裹：[formControlName]="i"。
2. 废弃组件使用：mat-input-container已经被Angular Material废弃，现在官方推荐用mat-form-field来包裹输入框。
3. 表单初始化验证：要确保你的FormArray已经正确初始化，并且每个控件都提前赋值了——空控件当然不会显示内容啦！

分场景修正代码 #

场景1：FormArray直接存储FormControl（单邮箱输入） #

如果你的邮箱列表只是单纯的字符串数组，不需要额外字段，直接用FormControl即可：

组件类初始化代码

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

@Component({
  selector: 'app-email-form',
  templateUrl: './email-form.component.html'
})
export class EmailFormComponent {
  myForm: FormGroup;

  // 定义getter快速获取emails FormArray
  get emails(): FormArray {
    return this.myForm.get('emails') as FormArray;
  }

  constructor(private fb: FormBuilder) {
    // 初始化表单，给每个邮箱控件赋值
    this.myForm = this.fb.group({
      emails: this.fb.array([
        this.fb.control('user1@example.com'),
        this.fb.control('user2@example.com')
      ])
    });
  }
}

修正后的HTML代码

<form [formGroup]="myForm">
  <div formArrayName="emails">
    <div *ngFor="let emailControl of emails.controls; index as i">
      <mat-form-field appearance="fill">
        <input matInput [formControlName]="i" placeholder="Email Address">
      </mat-form-field>
    </div>
  </div>
</form>

场景2：FormArray存储FormGroup（含其他字段的复杂结构） #

如果每个邮箱项还有额外字段（比如备注、类型），需要用FormGroup包裹：

组件类初始化代码

// 省略重复导入代码
constructor(private fb: FormBuilder) {
  this.myForm = this.fb.group({
    emails: this.fb.array([
      this.fb.group({
        email: this.fb.control('admin@example.com'),
        type: this.fb.control('work')
      }),
      this.fb.group({
        email: this.fb.control('personal@example.com'),
        type: this.fb.control('private')
      })
    ])
  });
}

修正后的HTML代码

<form [formGroup]="myForm">
  <div formArrayName="emails">
    <div *ngFor="let emailGroup of emails.controls; index as i" [formGroupName]="i">
      <mat-form-field appearance="fill">
        <input matInput formControlName="email" placeholder="Email Address">
      </mat-form-field>
      <!-- 可以添加其他字段，比如邮箱类型 -->
      <mat-form-field appearance="fill">
        <mat-select formControlName="type" placeholder="Email Type">
          <mat-option value="work">Work</mat-option>
          <mat-option value="private">Private</mat-option>
        </mat-select>
      </mat-form-field>
    </div>
  </div>
</form>

关键注意点 #

• 必须确保表单根节点绑定了[formGroup]="myForm"，否则嵌套的formArrayName和formControlName都会失效；
• 如果是动态添加邮箱项，要通过FormArray的push()方法添加新的FormControl或FormGroup，不要直接操作DOM；
• 测试时可以通过console.log(this.emails.value)查看表单值是否正确，确认数据链路没问题。

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