Angular+TypeScript表单div复制：解决Object is possibly 'null'错误

一、先解决当前的类型错误 #

你遇到的Object is possibly 'null'是因为document.querySelector()可能返回null，TypeScript会严格检查这种情况。可以通过两种方式修复：

方式1：添加空值检查 #

clone() {
  const example = document.querySelector('.example');
  const formContainer = document.querySelector('.form-container');
  // 先确认元素存在再执行操作
  if (example && formContainer) {
    const clone = example.cloneNode(true) as HTMLElement;
    formContainer.appendChild(clone);
  }
}

方式2：使用非空断言（确定元素一定存在时用） #

clone() {
  // 用!断言元素不为null
  const example = document.querySelector('.example')!;
  const clone = example.cloneNode(true) as HTMLElement;
  document.querySelector('.form-container')!.appendChild(clone);
}

注意：原生DOM克隆的方式在Angular中存在严重缺陷——克隆出来的表单元素不会和Angular的FormControl绑定，输入内容无法被框架追踪，表单验证也会失效，所以不推荐用这种方式。

二、Angular推荐的动态表单实现（最优方案） #

Angular提供了FormArray来管理动态表单，完全遵循数据驱动的理念，避免直接操作DOM：

1. 组件TS代码 #

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  formArray: FormArray;
  matcher = new ErrorStateMatcher(); // 保留你原来的错误匹配器

  constructor(private fb: FormBuilder) {
    // 初始化表单数组，默认包含一个表单项
    this.formArray = this.fb.array([this.createNameForm()]);
  }

  // 创建单个表单组
  createNameForm(): FormGroup {
    return this.fb.group({
      name: ['', [Validators.required]]
      // 可以在这里添加你自定义的name格式验证器
    });
  }

  // 添加新的表单项
  addNewItem() {
    this.formArray.push(this.createNameForm());
  }

  // 删除指定索引的表单项
  removeItem(index: number) {
    this.formArray.removeAt(index);
  }

  // 便捷获取指定索引的表单组
  getFormGroup(index: number): FormGroup {
    return this.formArray.at(index) as FormGroup;
  }
}

2. 模板HTML代码 #

<div class="form-container">
  <!-- 用*ngFor遍历表单数组，渲染每个表单组 -->
  <form class="example" *ngFor="let group of formArray.controls; let i = index" [formGroup]="group">
    <mat-form-field>
      <mat-label>Name</mat-label>
      <input type="text" matInput formControlName="name" [errorStateMatcher]="matcher">
      <mat-error *ngIf="getFormGroup(i).get('name')?.hasError('required')">
        Please enter name
      </mat-error>
      <mat-error *ngIf="getFormGroup(i).get('name')?.hasError('name') && !getFormGroup(i).get('name')?.hasError('required')">
        Please enter a valid name
      </mat-error>
    </mat-form-field>
    <button 
      mat-icon-button 
      color="primary" 
      class="delete" 
      matTooltip="Remove item" 
      (click)="removeItem(i)"
      [disabled]="formArray.length === 1"
    >
      <mat-icon>delete</mat-icon>
    </button>
  </form>

  <button id="addEmailField" (click)="addNewItem()">
    <mat-icon>add</mat-icon> Add new item
  </button>
</div>

为什么这是最优方案？ #

• 完全适配Angular表单机制，表单数据和视图双向绑定，输入内容能被正确追踪
• 每个动态添加的表单都独立拥有验证状态，错误提示正常工作
• 不需要直接操作DOM，符合Angular组件化开发规范，后续维护扩展更简单
• 可以轻松添加更多表单字段，只需修改createNameForm方法中的FormGroup定义

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