javascript - Cum să realizez funcționalitatea într-un formular Angular în care vreau să redau controale de formular dinamic printr-un sub-component?

Am creat un formular reactiv Angular în care etichetele trebuie schimbate în funcție de permisiuni. Vreau să gestionez aceste schimbări semantice prin componente, creând o componentă care să fie responsabilă pentru preluarea datelor ca @Input() și randarea acelor etichete de input specifice. Care este modalitatea corectă de a gestiona acest lucru?

Există un component părinte master-form.component care constă în cu 'formGroup' și un sub-component numit input-switch.component. Am transmis parametri specifici către sub-component prin @Input(). Sub-componentul constă în cu valoarea câmpului și cu formControlName, comutat cu ngIf.

Iată fișierul master-form.component html -

<form class="master-form" [formGroup]="masterForm" (ngSubmit)="submitData(masterForm)">
    <label>My first field: </label>
    <input-switch [setting]="'change'" [labelVal]="'first field value'" [formCtrl]="'firstField'">
    </input-switch>
    <label>My second field: </label>
    <input-switch [setting]="'change'" [labelVal]="'second field value'" 
[formCtrl]="'secondField'">
    </input-switch>
    <button type="submit" [disabled]="!masterForm.valid"></button>
</form>

Clasa componentă Master-form -

class MasterFormComponent implements OnInit {
    masterForm: FormGroup;

    constructor(private fb: FormBuilder){}

    ngOnInit() {
        this.masterForm = this.fb.group({
          firstField: ['', Validators.maxLength(10)],
          secondField: ['', Validators.maxLength(20)]
        });
    }

    submitData(form) {
        console.log('DONE!');
    }
}

Clasa subcomponentă comutator de intrare -

class InputSwitch {
    @Input() setting ;
    @Input() labelVal;
    @Input() formCtrl;
}

HTML subcomponent comutator de intrare -

<span *ngIf="setting !== 'change'">{{labelVal}}</span>
<input *ngIf="setting === 'change'" [formControlName]="formCtrl" />

Se aruncă o eroare menționând lipsa 'formGroup' în input-switch.component și nu pot să setez formularul. Care pare a fi problema aici? Există vreo altă modalitate de a realiza această funcționalitate?

Răspuns #1

Poți parcurge acest blog. Menționează cum poți gestiona componentele copil într-un formular folosind interfața ControlValueAccessor.

Formulare Reactive Înmărmurite Folosind ControlValueAccessors

Acesta este complex, dar poți să încerci.

De asemenea, poți crea două componente separate, fiecare având elemente de formular diferite și le poți comuta folosind *ngIf. Separarea în componentă/directivă va necesita inserarea în fiecare câmp de formular. Legarea modelului trebuie gestionată corect, având în vedere că ngModel este prezent în controlerul părinte. Dacă nu este gestionată corespunzător, acest lucru poate crește complexitatea codului.

În funcție de cerința dvs., alegeți o modalitate de a proceda.