模板中的 angular2 和 formControlName 值

Question

哦，angular2...为什么这么难？

<input type="text" formControlName="exposure" type="hidden">
<label>{{exposure}}</label>

如果我在输入中使用 formControlName，则值是正确的。

如何获取模板中的曝光值？标签中的空白

Answer 1

The formControlName directive is designed to be used with a parent FormGroupDirective (selector: [formGroup]).

It accepts the string name of the FormControl instance you want to link, and will look for a FormControl registered with that name in the closest FormGroup or FormArray above it.

使用form.get('exposure').value获取控件值。

例子:

<form [formGroup]="form">
    <input type="text" formControlName="exposure" type="hidden">
    <label>{{ form.get('exposure').value }}</label>
</form>

或者

在您的组件类中，定义一个代表您的表单控件的 getter 属性:

export class MyComponent {
  form = new FormGroup({
    exposure: new FormControl('')
  });

  get exposure(): FormControl { return this.form.get('exposure'); }

然后，在您的组件模板中，您可以引用exposure:

<input type="text" formControlName="exposure" type="hidden">
<label>{{exposure.value}}</label>