Wykonuję aplikacje kątowe i buduję dynamiczną formę kątową.

Tutaj próbuję podzielić formularz na dwie części, takie jak imię i nazwisko osoby oraz dane osobowe.

W przypadku nazwy osoby działa w przypadku grupowania, ale w przypadku danych osobowych nie działa.

Html:

<div *ngIf="form">
  <div *ngFor="let question of questions" class="form-row" [formGroup]="form">
      <ng-container *ngIf="!question.children">
        <app-question [question]="question" [form]="form"></app-question>
      </ng-container>
      <ng-container *ngIf="question.controlType === 'group' && question.children && question.children.length > 0">
        <app-dynamic-group [questions]="question.children" [form]="form.controls[question.key]" [key]="question.key" [formControlName]="question.key"></app-dynamic-group>
      </ng-container>
  </div>
</div>

JSON :

  jsonData: any = [
    {
      "elementType": "group",
      "key": "person_name",
      "children": [
        {
          "elementType": "textbox",
          "class": "col-12 col-md-4 col-sm-12",
          "key": "first_name",
          "label": "First Name",
          "type": "text",
          "value": "",
          "required": true,
          "minlength": 3,
          "maxlength": 20,
          "order": 1
        },
        {
          "elementType": "textbox",
          "class": "col-12 col-md-4 col-sm-12",
          "key": "last_name",
          "label": "Last Name",
          "type": "text",
          "value": "",
          "required": true,
          "order": 2
        }
     ],
    },
        {
      "elementType": "group",
      "key": "personal_details",
      "children": [
        {
          "elementType": "textbox",
          "class": "col-12 col-md-4 col-sm-12",
          "key": "email",
          "label": "Email",
          "type": "text",
          "value": "",
          "required": true,
          "minlength": 3,
          "maxlength": 20,
          "order": 1
        },
        {
          "elementType": "textbox",
          "class": "col-12 col-md-4 col-sm-12",
          "key": "mobile",
          "label": "Mobile",
          "type": "text",
          "value": "",
          "required": true,
          "order": 2
        }
     ],
    },
  ];

Pracujący Stckblitz: https://stackblitz.com/edit/angular -x4a5b6-5uj52y

Od czasu pracy wszystko działa dobrze.. Już utworzono grupę dla nazwy osoby i działa dobrze, ale dla danych osobowych nie mogę znaleźć pól wejściowych..

Pojedynczy formularz musi zostać podzielony z tytułami nad każdą częścią, co jest wymogiem tego formularza.

Tutaj {{question.key}} wyświetla nazwę na każdym polu wprowadzania, ale muszę wyświetlić tylko Person Name na górze .. Ponieważ jest to tytuł nadrzędny, a pozostałe, takie jak First Name, Last Name to etykiety pól wprowadzania.. Jak wyświetlić sam tytuł nadrzędny przed każdą częścią (Imię osoby (ma imię i nazwisko) , Dane osobowe (ma adres e-mail i telefon komórkowy))...

Chciałbym, aby zamówienie zostało podzielone dokładnie tak, jak poniżej, z tytułem odpowiednio dla każdego.

Imię i nazwisko

 -> First Name
 -> Last Name

Dane osobowe

 -> Email
 -> Mobile Number

Jeśli mylę się z powyższym podejściem, uprzejmie pomóż mi podzielić to https://stackblitz.com /edit/angular-x4a5b6-geesde dynamiczna forma jak w poniższym podejściu.

Mój formularz musi wyglądać tak https://stackblitz.com/edit/angular-zc34qr ale musi mieć czystą dynamiczną formę kątową i ładowanie JSON.

Pomóż mi stworzyć grupę Personal Details taką jak Person Name, która została już utworzona i działa...

Utknąłem w tym przez długi czas uprzejmie pomóż mi proszę...

0
Maniraj Murugan 18 listopad 2018, 06:11

1 odpowiedź

Najlepsza odpowiedź

Nie rozumiem, dlaczego tworzysz tutaj dodatkowy formGroup:

this.form = new FormGroup({main: innerForm});

Po prostu użyj formGroup, które otrzymujesz ze swojej usługi:

dynamic-form.component.ts

this.form = this.qcs.toFormGroup(this.questions);

dynamic-form.component.html

<app-dynamic-group [questions]="questions" [form]="form"></app-dynamic-group>

Teraz nie musisz implementować ControlValueAccessor na swoim DynamicGroupComponent. Przekazujesz do niego FormGroup i powinno wystarczyć do dynamicznego generowania formularza.

dynamic-group.component.ts

@Component({
  selector: 'app-dynamic-group',
  templateUrl: './dynamic-group.component.html'
})
export class DynamicGroupComponent {
  @Input() form: FormGroup;

  @Input() questions: QuestionBase<any>[] = [];
}

dynamic-group.component.html

<div *ngFor="let question of questions" class="form-row">
    <app-question *ngIf="!question.children" [question]="question" [form]="form"></app-question>

    <app-dynamic-group 
       *ngIf="question.controlType === 'group' && question.children && question.children.length"
       [form]="form.get(question.key)"
       [questions]="question.children">
    </app-dynamic-group>
</div>

Rozwidlony Stackblitz

2
yurzui 18 listopad 2018, 11:18