Angular 5属性传值：HTML属性值的{{}}等价语法问询

让我一步步帮你拆解问题：先解答你问的HTML属性中{{obj.firstname}}的等价写法，再解决你遇到的表单控件绑定报错问题。

一、{{obj.firstname}}在HTML属性中的等价写法 #

在Angular里，插值表达式{{obj.firstname}}主要用于渲染HTML内容，对应的属性绑定等价写法是用方括号包裹目标属性，直接把表达式赋值给属性：

举个例子，原本的写法：

<span title="{{obj.firstname}}">我的名字</span>

完全等价于：

<span [title]="obj.firstname">我的名字</span>

两种方式都会把obj.firstname的值赋值给title属性，但方括号的属性绑定是Angular更推荐的写法——它直接处理表达式逻辑，避免了插值表达式的字符串转换环节，在处理复杂数据类型时更稳定。

二、你的表单绑定报错原因及解决办法 #

你的核心问题其实不是写法等价性，而是对formControlName的工作逻辑理解有误，我们逐个分析：

1. 为什么formControlName="obj.param_meta"会报错？ #

这里的"obj.param_meta"是一个固定字符串，Angular会在当前关联的表单组里，查找名为"obj.param_meta"的控件。但显然你的表单结构里，param_meta是嵌套在obj这个子表单组里的，不是一个叫"obj.param_meta"的独立控件，所以会抛出“Cannot find control with name: 'obj.param_meta'”的错误。

2. 为什么[formControlName]="obj.param_meta"还是报错？ #

这种写法是把obj.param_meta的实际值（比如你报错里的"NAME"）作为控件名去查找，但你的表单组里并没有名为"NAME"的控件，所以自然也找不到。

正确的绑定方式 #

假设你的表单在组件类里是这样定义的（嵌套FormGroup结构）：

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

constructor(private fb: FormBuilder) {}

myForm: FormGroup;

ngOnInit() {
  // 外层表单组包含obj子表单组，obj里有param_meta控件
  this.myForm = this.fb.group({
    obj: this.fb.group({
      param_meta: ['默认值']
    })
  });
}

写法一：用formGroupName指定父级分组（推荐）

在模板里，你需要先通过formGroupName声明当前属于obj这个子表单组，再用formControlName绑定子控件名：

<!-- 先绑定整个表单到组件里的myForm -->
<form [formGroup]="myForm">
  <!-- 声明当前区域属于obj子表单组 -->
  <div formGroupName="obj">
    <!-- 直接绑定param_meta控件 -->
    <input type="text" formControlName="param_meta">
    <!-- 对应的label可以这样关联（注意input要加id） -->
    <label for="paramMetaInput">{{obj.param_meta}}</label>
    <input id="paramMetaInput" type="text" formControlName="param_meta">
  </div>
</form>

写法二：直接用[formControl]绑定控件引用

如果不想嵌套formGroupName，也可以直接通过表单的get方法获取控件引用，用[formControl]绑定：

<form [formGroup]="myForm">
  <input type="text" [formControl]="myForm.get('obj.param_meta')">
</form>

另外补充个小细节：for是label标签的专属属性，用来关联input的id，input标签本身没有for属性，所以你的input里写for="obj"是无效的，要改成给input加id，然后label的for对应这个id。

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