在角度6中使用带有标签的FormcontrolName

Question

我有一个带有反应形式的 Angular 6 项目。我有一个如下所示的网格。

Detail

按钮，打开模态窗口并显示学生信息。我的对话框 html 如下所示。但这给了我

No value accessor for form control with name: studentNumber

错误。难道是我的html逻辑错了？

这不起作用

<form [formGroup]="studentForm">
  <p-dialog header="Student Detail" [(visible)]="displayStudentForm">
    <div class="p-grid">
        <label>Student Number</label>
        <label formControlName="studentNumber"></label>
    </div>
    <div class="p-grid">
        <label>Student Age</label>
        <label formControlName="studentAge"></label>
    </div>
    <div class="p-grid">
        <label>Student Type</label>
        <label formControlName="studentType"></label>
    </div>
  </p-dialog>
</form>

当我尝试如下时，工作完美。但是，这对于到处写来说太长了。

<label>{{studentForm.controls.studentNumber.value}}</label>

当我尝试如下时，工作完美

<input formControlName="studentNumber"> 

Answer 1

为了不重复自己，我会为这种情况创建简单的指令：

import { Directive, HostBinding, Optional, Input } from '@angular/core';
import { ControlContainer} from '@angular/forms';

@Directive({
  selector: 'label[controlName]',
})
export class LabelControl {
  @Input() controlName: string;

  constructor(@Optional() private parent: ControlContainer) {}

  @HostBinding('textContent')
  get controlValue() {
    return this.parent ? this.parent.control.get(this.controlName).value : '';
  }
}

并按如下方式使用它：

<label controlName="studentNumber"></label>

NG 运行示例

Answer 2

在组件中，您可以创建一个 getter 方法，该方法将返回表单控件值。

<form [formGroup]="studentForm">
  <p-dialog header="Student Detail" [(visible)]="displayStudentForm">
    <div class="p-grid">
        <label>Student Number</label>
        <label>{{getControlLabel('studentNumber')}}</label>
    </div>
    <div class="p-grid">
        <label>Student Age</label>
        <label>{{getControlLabel('studentAge')}}</label>
    </div>
    <div class="p-grid">
        <label>Student Type</label>
        <label>{{getControlLabel('studentType')}}</label>
    </div>
  </p-dialog>
</form>

组件：

getControlLabel(type: string){
 return studentForm.controls[type].value;
}

Answer 3

一个解决方法......就像一个魅力！ :)

input[readonly]{
   border: none;
   background: none;
   outline: none;
}

...
<input readonly formControlName="studentNumber">
...