typescript - Bruke FormcontrolName med etikett i angular 6

Jeg har et Angular 6-prosjekt med reaktive skjemaer. Jeg har et rutenett som vist nedenfor. Detail-knappen åpner et modalvindu og viser studentinformasjon. Min HTML for dialogen ser slik ut. Men det ga meg No value accessor for form control with name: studentNumber-feil. Er logikken i HTML-en min feil?

Dette fungerer ikke

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

Når jeg prøvde som nedenfor, fungerte det perfekt. Men dette er veldig langt å skrive overalt.

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

Når jeg prøvde som nedenfor, fungerte det perfekt

<input formControlName="studentNumber">

Svar #1

For å ikke gjenta deg selv ville jeg lage en enkel direktiv for det tilfellet:

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 : '';
  }
}

Og bruk det som følger:

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

Ng-run Eksempel

Svar #2

I komponenten kan du lage en getter-metode som vil returnere verdien til skjemaelementet.

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

Komponent:

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

Relaterte artikler