[英]Create dynamic forms with dynamic form fields with single submit button in angular 7
我已經在Angular 7中使用動態表單字段創建了動態表單,但是我無法維護單個提交按鈕,該按鈕將返回所有動態表單的值。
dynamic-form-multiple.html
<form novalidate (ngSubmit)="onSubmit(form.value)" [formGroup]="form">
<div class="form-group">
<h4>Details for {{group.groupName}}</h4>
<div class='row flex-row'>
<div class='col-md-6' *ngFor="let prop of objectProps">
<div [ngSwitch]="prop.itemType">
<div *ngSwitchCase="'Item'">
<label [attr.for]="prop">{{prop.egineAttribue}}</label>
<div [ngSwitch]="prop.componentType">
<div class='form-group__text'>
<input *ngSwitchCase="'Free Text'"
[formControlName]="prop.key"
[id]="prop.key" [type]="prop.type" class="form-control">
</div>
<div *ngSwitchCase="'Radio Button'">
<label *ngFor="let option of prop.values">
<input
type="radio"
(change)='ind=i'
class="form-control"
[name]="prop.key"
[formControlName]="prop.key"
[value]="option">{{option}}
</label>
</div>
<div class='form-group__text select' *ngSwitchCase="'Drop-down'">
<select class="form-control" [formControlName]="prop.key">
<option *ngFor="let option of prop.values" [value]="option">
{{ option }}
</option>
</select>
</div>
</div>
<div class="error" *ngIf="form.get(prop.key).invalid && (form.get(prop.key).dirty || form.get(prop.key).touched)">
<div *ngIf="form.get(prop.key).errors.required">
{{ prop.label }} is required.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
動態形式多重
@Input() dataObject;
@Input() group;
form: FormGroup;
ngOnInit() {
this.offerconstructService.formReset.subscribe((val) => {
if(val==='reset'){
}
})
this.tempObj = this.dataObject;
// remap the API to be suitable for iterating over it
this.objectProps =
Object.keys(this.dataObject)
.map(prop => {
return Object.assign({}, { key: prop },
this.dataObject[prop]);
});
// setup the form
const formGroup = {};
for (let prop of Object.keys(this.dataObject)) {
formGroup[prop] = new FormControl(this.dataObject[prop].value || '', this.mapValidators(this.dataObject[prop].validation));
}
this.form = new FormGroup(formGroup);
}
canvas.component.ts
<p-dialog header="Add All Offer Details" closable="true" modal="true" showHeader="false" (onHide)="onHide()"
[resizable]="false" [responsive]="false" [(visible)]="display" [contentStyle]="{'height': '450px', 'max-height':'450px', 'width':'100% !important'}"
positionTop='150' positionRight='0' positionLeft='0'>
<div class="divider" style="margin-top: -1.5%"></div>
<div>
<ul id="tabsv1" class="tabs">
<li id="tabsv1-1" class="tab">
<a tabindex="0">
<a (click)='majorLine()' [ngClass]="{'active': majorLineItemsActive, 'tab__heading':true}">Add Major Line
Details</a>
</a>
</li>
<li id="tabsv1-2" class="tab">
<a tabindex="0">
<a (click)='minorLine()' [ngClass]="{'active': minorLineItemsActive, 'tab__heading':true}">Add Minor Line
Details</a>
</a>
</li>
</ul>
</div>
<div *ngIf='minorLineItemsActive'>
<div *ngFor='let formGroupDataMinorItems of formGroupDataMinorItems'>
<div *ngFor='let groupsMinor of formGroupDataMinorItems.groups'>
<div class="row half-margin-bottom">
<div class="col-md-12">
<dynamic-form-multiple [group]='groupsMinor' [groupName]='groupsMinor.groupName' [dataObject]="groupsMinor.listOfferQuestions"></dynamic-form-multiple>
</div>
</div>
</div>
</div>
</div>
<div *ngIf='majorLineItemsActive'>
<div *ngFor='let formGroupData of formGroupData'>
<div *ngFor='let groups of formGroupData.groups'>
<div class="row half-margin-bottom">
<div class="col-md-12">
<dynamic-form-multiple [group]='groups' [dataObject]="groups.listOfferQuestions"></dynamic-form-multiple>
</div>
</div>
</div>
</div>
</div>
從canvas.component.ts我將JSON數據傳遞給dynamic-form-multiple.html,它將生成具有多個提交按鈕的多個表單和字段,但是我需要為所有表單提供一個提交按鈕,這將返回所有表單在JSON結構中。
要么
還有其他方法可以在一頁上使用動態表單字段來實現多種表單嗎?
如果我正確理解了您的問題,則無論何時提交任何一種表單,都必須在canvas.component.ts
獲取所有dynamic-form-multiple
組件的表單數據 。
dynamic-form-multiple
提交事件。 看起來像<dynamic-form-multiple (submit)="getAllFormsData"></dynamic-form-multiple>
dynamic-form-multiple.ts
定義一個方法,您可以通過該方法遍歷動態生成的表單並將表單數據作為json返回。 我們稱之為getFormAsJson()
canvas.component.ts
限定getAllFormsData()
每當任何動態表單提交將被調用的方法。 要獲取所有動態表單數據,您可以按照以下步驟進行。 export class CanvasComponent {
@ViewChildren("dynamic-form-multiple") dynamicForms: QueryList<DynamicFormMultiple>
getAllFormsData() {
this.dynamicForms.forEach(formComponent => {
console.log(formComponent.getFormAsJson());
})
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.