模板中的angular2和formControlName值

Question

哦，有角度的......为什么这么难？

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

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

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

Answer 1

  

formControlName指令旨在与父级一起使用   FormGroupDirective（选择器：[formGroup]）。

     

它接受您想要的FormControl实例的字符串名称   链接，并将查找在该名称中注册的FormControl   高于它的FormGroup或FormArray。

使用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>

Answer 2

声明模板变量：

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

Answer 3

如果您希望在模板中打印表单的实时值。

使用

<p>{{myForm.value|json}}</p>