---
title: "坑"
date: "2026-04"
category: "Angular"
tags: ["Angular"]
description: "这里有个坑，这俩是不能并用的，响应式表单内如果要单独加ngModel，就必须给他加上单独模式。因为响应式表单本身就自带双向绑定，都加的话就会冲突..."
source: "https://enriquemark.com/zh-hans/posts/%E5%9D%91"
---

```ts
//模板表單
[(ngModel)]="cityValue" [ngModelOptions]="{standalone: true}"
//響應式表單
[formGroup]="form"
formControlName="enName"
```

这里有个坑，这俩是不能并用的，响应式表单内如果要单独加`ngModel`，就必须给他加上单独模式。因为响应式表单本身就自带双向绑定，都加的话就会冲突。

取资料的时候一定要确定资料到底有没有上去，这个很关键，有些地方需要显示更新，所以参考前人的写法很重要。

所以最好是保持一致性，实际上`form`完全是可以嵌套的，如果需要再讨一个group，那就直接套。

```ts
// 1. formGroup - 绑定整个表单，根節點聲明
<form [formGroup]="myForm">
// 2. formControlName - 绑定单个控件，下同，對應form内部的key
<input formControlName="name">
// 3. formGroupName - 绑定嵌套表单组，formGroup内部再套一個Group的時候就用這個
<div formGroupName="address">
// 4. formArrayName - 绑定表单数组
<div formArrayName="skills">
  @for (skill of skills.controls; track $index) {
    <input [formControlName]="$index">
  }
</div>
```

另一个方面，`[formControl]`是一个和`[formGroup]`一样可以单独存在的对象，但`[formArray]`则是 不存在的，因为formArr很少会但

`{ emitEvent: false }`是为了防止出发无限循环，比如在一个副作用的时候，在里面更新一个可能导致副作用的表，就得把这个加进去，否则会无限循环，这个的意思就是阻止其向外发送更新信号。