Angular 17模板驱动表单：如何让ngModel自动创建null对象属性？

Angular 默认不具备 AngularJS 中ng-model自动创建嵌套对象的能力，所以直接绑定obj.another.name会因another为null抛出错误，使用obj.another && obj.another.name又只能读取值无法完成双向绑定赋值。要实现初始保持null、用户输入时自动创建test2对象并赋值的需求，可以通过以下几种方式实现：

方法1：用Getter/Setter包装属性 #

在组件中为嵌套属性定义 getter 和 setter，当设置值时自动初始化test2对象：

// 组件类中
get anotherName(): string {
  return this.obj.another?.name ?? '';
}

set anotherName(value: string) {
  if (!this.obj.another) {
    // 当another为null时，自动创建test2对象
    this.obj.another = { name: '' };
  }
  this.obj.another.name = value;
}

模板中直接绑定这个包装后的属性：

<input name="tester" [(ngModel)]="anotherName">

这种方式逻辑简单，适合单个嵌套属性的场景，初始状态下obj.another仍为null，用户输入时自动完成对象创建。

方法2：自定义ngModel指令 #

如果需要复用这个逻辑，可以创建一个自定义指令，拦截ngModel的赋值流程，自动根据路径创建嵌套对象：

import { Directive, HostListener, Input } from '@angular/core';
import { NgModel } from '@angular/forms';

@Directive({
  selector: '[ngModel][autoCreateNested]'
})
export class AutoCreateNestedDirective {
  // 接收嵌套属性路径，比如"another.name"
  @Input('autoCreateNested') nestedPath: string;

  constructor(private ngModel: NgModel) {}

  @HostListener('input', ['$event.target.value'])
  onInput(value: string) {
    const pathSegments = this.nestedPath.split('.');
    let currentObj = this.ngModel.model;

    // 遍历路径，创建不存在的嵌套对象
    for (let i = 0; i < pathSegments.length - 1; i++) {
      const key = pathSegments[i];
      if (!currentObj[key]) {
        currentObj[key] = {};
      }
      currentObj = currentObj[key];
    }

    // 给最终属性赋值
    currentObj[pathSegments[pathSegments.length - 1]] = value;
    this.ngModel.viewToModelUpdate(value);
  }

  ngOnInit() {
    // 初始化视图显示值
    const pathSegments = this.nestedPath.split('.');
    let currentObj = this.ngModel.model;
    for (const segment of pathSegments) {
      if (!currentObj) break;
      currentObj = currentObj[segment];
    }
    this.ngModel.control.setValue(currentObj ?? '');
  }
}

使用时需要先在模块中声明该指令，然后在模板中传入嵌套路径：

<input name="tester" [(ngModel)]="obj" autoCreateNested="another.name">

方法3：模板中手动处理输入事件 #

如果不想额外编写类或指令，也可以直接在模板中拆分双向绑定，通过ngModelChange事件手动创建对象：

<input 
  name="tester" 
  [ngModel]="obj.another?.name" 
  (ngModelChange)="updateAnotherName($event)"
>

组件中对应的处理方法：

updateAnotherName(value: string) {
  if (!this.obj.another) {
    this.obj.another = { name: '' };
  }
  this.obj.another.name = value;
}

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