我有带有反应形式的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">
答案 0 :(得分:4)
为了不重复自己,我将为这种情况创建简单的指令:
import { Directive, HostBinding, Optional } 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>
答案 1 :(得分:0)
在IN组件中,您可以创建一个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;
}