Como combinar duas partes de forma única em angular?
stou fazendo aplicação angular com forma dinâmica angular, onde estou carregando dados para forma dinâmica através do JSO
JSON tem duas partes, comoparte 1 e parte 2,
jsonDataPart1: any = [
{
"elementType": "textbox",
"class": "col-12 col-md-4 col-sm-12",
"key": "project_name",
"label": "Project Name",
"type": "text",
"value": "",
"required": false,
"minlength": 3,
"maxlength": 20,
"order": 1
},
{
"elementType": "textbox",
"class": "col-12 col-md-4 col-sm-12",
"key": "project_desc",
"label": "Project Description",
"type": "text",
"value": "",
"required": true,
"order": 2
}
]
jsonDataPart2: any = [
{
"elementType": "textbox",
"class": "col-12 col-md-4 col-sm-12",
"key": "property_one",
"label": "Property One",
"type": "text",
"value": "",
"required": true,
"order": 3
},
{
"elementType": "textbox",
"class": "col-12 col-md-4 col-sm-12",
"key": "property_two",
"label": "Property Two",
"type": "text",
"value": "",
"required": true,
"order": 4
},
{
"elementType": "radio",
"class": "col-12 col-md-3 col-sm-12",
"key": "property_required",
"label": "Property Required",
"options": [
{
"key": "required",
"value": "Required"
},
{
"key": "not_required",
"value": "Not Required"
}
],
"order": 5
},
{
"elementType": "checkbox",
"class": "col-12 col-md-3 col-sm-12",
"key": "property_check",
"label": "Property Required",
"order": 6
}
]
E estou carregando o JSON como parte separada, como
ngOnInit() {
//Building form first part
this.questions = this.service.getQuestions(this.jsonDataPart1)
this.form = this.qcs.toFormGroup(this.questions);
//Building form second part
this.questionsPartTwo = this.service.getQuestions(this.jsonDataPart2)
this.formPartTwo = this.qcs.toFormGroupPartTwo(this.questionsPartTwo);
}
E HTML parece,
<div>
<form (ngSubmit)="onSubmit()" [formGroup]="form">
<h4> <b> Form Part One begins from here </b> </h4>
<div *ngFor="let question of questions" class="form-row">
<ng-container>
<app-question [question]="question" [form]="form"></app-question>
</ng-container>
</div>
<h4> <b> Form Part Two begins from here </b> </h4>
<div *ngFor="let partTwo of questionsPartTwo">
<ng-container>
<app-question [question]="partTwo" [form]="formPartTwo"></app-question>
</ng-container>
</div>
<div class="form-row">
<button type="submit" [disabled]="!form.valid">Save</button>
</div>
</form> <br>
<pre>
{{form?.value|json}}
</pre>
</div>
Preciso combinar esses dois e obter uma saída única para todo o formulário único.
Na minha aplicação real, estou tendo dois dados json e carregando cada um separadamente e atribuindo o formulário, portanto, não desmonte a parte um e a parte dois json ..
Deixe-me parar o código aqui, pois está ficando longo, você pode ficar confuso ..
Aqui está um stackblitz de trabalho: https: //stackblitz.com/edit/angular-x4a5b6-2rykp
Basta tomar uma solução alternativadynamic-form.component.ts and dynamic-form.component.html
Você vai ficar claro o que eu fiz ..
Kindly me ajude a carregar o JSON dividido parathis.service.getQuestions
e obtenha duas partes e junte as duas na saída final para enviar ..
Se eu estiver errado na abordagem, por favor, ajude-me a corrigi-la, pois sou novo na forma angular e dinâmica. Ele precisa estar na forma dinâmica angular ejson
carregando apenas nenhuma alteração ..
Ajuda que espero é combinar as partes 1 e 2 ao enviar o formulário ..
Por favor me ajude, eu estou preso por um longo tempo para sair dela ..