[英]How to display the value using formControlName in a label -angular 7
[英]Using FormcontrolName with label in angular 6
我有反应性形式的角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">
为了不重复自己,我将为这种情况创建简单的指令:
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>
在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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.