Я использую динамическую форму, основанную на структуре JSON. Когда я определяю formControl
и пытаюсь вызвать его из mat-error
, я получаю сообщение об ошибке. Я использую formGroup
с formControlName
, но я не решил его.
JSON Структура:
{
"codeFormulaire":"DCR0",
"libelleFormulaire":"La demande de crédit",
"idDossier": "ID",
"sections": [
{
"codeSection":"ACT",
"libelleSection": "Activité",
"sousSections": [
{
"codeSousSection": "AC1",
"libelleSousSection": "Activité par défaut",
"lignes": [
{
"rubriques": [
{
"codeRubrique":"OCTDCO06",
"description": "CRR proposé",
"typeRubrique": "liste",
"valeur": "",
"isRequired": true,
"options": [
{
"valeur":"Volvo",
"label":"voiture-volvo",
"isSelected": true
},
{
"valeur":"A6",
"label":"voiture-audi",
"isSelected": false
}
]
},
{
"codeRubrique":"OCTDCO50",
"description": "Date de cloture",
"typeRubrique": "date",
"valeur": "",
"isRequired": true
}
]
}
]
}
HTML КОД:
<button mat-raised-button class="enregistrer-color">Enregistrer</button>
<button mat-raised-button class="valider-color">Valider</button>
<div *ngFor="let section of sections; let l = index">
<mat-toolbar color="accent">
<div color="primary" class="section-title">{{ section.libelleSection }}</div>
</mat-toolbar>
<div *ngFor="let sousSection of section.sousSections; let k = index">
<mat-toolbar color="warn" class="section-title">{{ sousSection.libelleSousSection }}</mat-toolbar>
<div class="container">
<div *ngFor="let ligne of sousSection.lignes; let j = index">
<mat-grid-list cols="2" rowHeight="75px">
<div *ngFor="let rubrique of ligne.rubriques; let i = index">
<div class="example-container">
<mat-grid-tile>
<div *ngIf="rubrique.typeRubrique === 'date'"
</div>
<div *ngIf="rubrique.typeRubrique === 'liste'">
<label>{{ rubrique.description }} : </label>
<mat-form-field>
<mat-select [(ngModel)]="rubrique.valeur"
formControl="rubrique.formControl">
<mat-option *ngFor="let option of rubrique.options" [value]="option.label">
{{option.valeur}}
</mat-option>
</mat-select>
<mat-error *ngIf="rubrique.formControl.erros.required">
Ce champs est <strong>obligatoire !</strong>
</mat-error>
</mat-form-field>
Код TypeScript: это функция для получения формы (структура JSON), и после этого я использую эти циклы для инициализации каждого formControl, но у меня есть эти ошибки, и когда я отлаживаюсь, я не могу получить доступ к этим циклам / ошибкам: Невозможно создать свойство ' валидатор 'on string' rubrique.formControl '
for (let i = 0; i < this.sections.lenght; i++) {
this.controls[i] = new Array();
for (let j = 0; j < this.sections.sousSections.lenght; j++) {
this.controls[i][j] = new Array();
for (let k = 0; k < this.sections.sousSections.lignes.lenght; k++) {
this.controls[i][j][k] = new Array();
for (let l = 0; l < this.sections.sousSections.lignes.rubriques.lenght; l++) {
if (this.sections.sousSections.lignes.rubriques[l].isRequired) {
rubrique.formControl = new FormControl('', Validators.required);
this.form.addControl(rubrique.formControl);
}
}
}
Чтобы создать массив с 4 измерениями, я определяю в каждом цикле новый Array ().