Создавайте динамические формы с динамическими полями формы с помощью единственной кнопки отправки в угловых 7 - PullRequest
Новая
       34

Создавайте динамические формы с динамическими полями формы с помощью единственной кнопки отправки в угловых 7

0 голосов
/ 21 февраля 2019

Я создал динамические формы с полями динамической формы в Angular 7, но я не могу сохранить одну кнопку отправки, которая будет возвращать значение всей динамической формы.

dynamic-form-multiply.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>

dynamic-form-multip.ts 

@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.

ИЛИ

Существуют ли другие способы получения нескольких форм с полями динамической формы на одной странице?

1 Ответ

0 голосов
/ 06 июля 2019

Если я правильно понимаю ваш вопрос, вы должны получить все dynamic-form-multiple данные формы компонента в canvas.component.ts, когда любая из форм отправляется .

  • listenотправить событие от 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());
    })
  }
}
...