Harnessing the Power of FormControlName and Labels in Angular 6

Question

Harnessing the Power of FormControlName and Labels in Angular 6

In my project using Angular 6 and reactive forms, I have a grid with a Detail button that opens a modal window displaying student information. However, when implementing the HTML for the dialog box as shown below, I encountered an error message stating:

No value accessor for form control with name: studentNumber

. Is there an issue with my HTML logic?

The current implementation does not seem to be functioning correctly.

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

Although the following code works perfectly, it is quite lengthy to write repeatedly throughout the application.

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

This simpler implementation also works perfectly:

<input formControlName="studentNumber">

https://i.sstatic.net/r8dbp.png

angular typescript

Answer 1

Answer №1

In order to avoid redundancy, I recommend creating a simple directive specifically for this scenario:

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

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

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

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

You can then implement it like this:

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

Click here for a Ng-run Example

Answer 2

In order to avoid redundancy, I recommend creating a simple directive specifically for this scenario:

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

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

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

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

You can then implement it like this:

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

Click here for a Ng-run Example

Answer 3

Answer №2

Within a component, you have the ability to create a getter method that will retrieve the value of a form control.

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

Component:

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

Answer 4

Within a component, you have the ability to create a getter method that will retrieve the value of a form control.

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

Component:

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

Answer 5

Answer №3

This clever solution worked perfectly! :)

input[disabled]{
   border: none;
   background-color: transparent;
   outline: none;
}

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

Answer 6

This clever solution worked perfectly! :)

input[disabled]{
   border: none;
   background-color: transparent;
   outline: none;
}

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

Harnessing the Power of FormControlName and Labels in Angular 6

Answer №1

Answer №2

Answer №3

Similar questions

Using a for-loop in Typescript to iterate over objects in an array

What is the best way to target all select2 elements with a single button click?

Is TypeScript capable of comprehending Svelte components?

Encountered an issue while trying to assign a value to the 'value' property on an 'HTMLInputElement' within a reactive form

The dropdown feature in Bootstrap 5 seems to be malfunctioning in Angular 12

Developing a project using npm and Node.js with Typescript has been smooth sailing so far. However, an issue has arisen

Angular lazy loading routes do not function as intended

Setting up project with local library installation in Angular 7 - Project configuration

Retrieving the value that is not currently selected in a mat-select component

Error encountered while loading a plugin in Typescript and RequireJS compilation process

typescript ways to exclude enum values

Tips for capturing the output of a dynamically rendered component in Angular 8

Generating a JavaScript bundle using the npm TypeScript compiler

The hook from Supabase is facing issues with proper importing

Increase the timestamp in Typescript by one hour

Unable to instantiate a Vue reference with a potential null type

Cannot send response headers once they have already been sent to the client [NEXTJS]

"Converting an angular date-picker into a popup-date-picker: A step-by-step

"An issue occurred while trying to utilize the output received from the angular service (undefined

Do you think it's important to include a maxlength validation message for an input field in Angular?