Как редактировать вложенную реактивную форму с проверкой? - PullRequest
Новая
       25

Как редактировать вложенную реактивную форму с проверкой?

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

Я получаю данные из сервиса, который имеет формат данных в массиве.Теперь, как мне связать данные в форме вложенности, если у меня есть массив из n чисел данных?Форма уже заполнена этими данными, и в ней также применяются поля проверки.

Это мой код родительского компонента html . 

<form [formGroup]="secondForm" (ngSubmit)="onSecondSubmit()" *ngIf="EnableSecond" [hidden]="!myForm.valid">

            <div formArrayName="items">

                <div *ngFor="let address of secondForm.get('items')['controls']; let i=index">


                    <div>
                        <label>Email Template - {{i + 1}}</label>
                        <span *ngIf="secondForm.controls.items.controls.length > 1" (click)="removeAddress(i)"> Remove
                        </span>
                    </div>
                    <editworkflow [groups]="secondForm.controls.items.controls[i]"></editworkflow>
                </div>
            </div>
            <a (click)="addAddress()">
                Create More Email Template
            </a>
            <div>
                <div>

                    <button nbButton type="submit" [disabled]="!secondForm.valid">Confirm</button>
                </div>
            </div>
        </form>

Это машинописный текст родительского компонента файл. 

ngOnint(){
this.usermodel.items =   this.items /*my array of object which i am getting 
from services*/ 
this.secondForm = this._fb.group({
        items: this._fb.array([
            this.initAddress(),
        ])
    });
}
initAddress() {
    return this._fb.group({
        EmailType: [this.usermodel.items.name, Validators.required],
        name: [this.usermodel.items.name, Validators.required],
        subject: [this.usermodel.items.template.subject, Validators.required],
        'from': [this.usermodel.items.template.from, [Validators.required, ValidationService.emailValidator]],
        'body': [this.usermodel.items.template.body, [Validators.required]],
        'active': [],
        'confidential': [],
        'numberOfDaysToWait': ['', Validators.required],
        'sequentialOrder': ['', Validators.required]
    });

}

addAddress() {
    // add address to the list

    const control = <FormArray>this.secondForm.controls['items'];
    control.push(this.initAddress());
}

removeAddress(i: number) {
    // remove address from the list
    const control = <FormArray>this.secondForm.controls['items'];
    control.removeAt(i);
}

Мой массив объектов будет выглядеть следующим образом. 

   "items": [
    {
      "template": {
        "name": "Series 1 email",
        "from": "TEAMGMG",
        "subject": "GROUP2 - SERIES1 - EMAIL",
        "body": "<html><body><strong>My test email</strong></body></html>",
        "confidential": true,
        "active": true
      },
      "sequentialOrder": 1,
      "numberOfDaysToWait": 0,
      "name": "Test email sequence 1",
      "description": "Test email GROUP 2 sequence 1 - description"
    }, {
      "template": {
        "name": "Series 2 email",
        "from": "TEAMGMG",
        "subject": "GROUP2 - SERIES2 - EMAIL",
        "body": "<html><body><strong>My test email2</strong></body></html>",
        "confidential": true,
        "active": true
      },
      "sequentialOrder": 2,
      "numberOfDaysToWait": 10,
      "name": "Test email sequence 2",
      "description": "Test email sequence 2 - description"
    }
  ]
}]

1 Ответ

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

Вы можете сделать функцию, которая получила «data» или null, и вернуть FormGroup 

  addAddress(data:any) {
    //if received a null, create a data with the necesary properties
    data=data||{template:{from:'',:'',name:'',subject:'',...},sequentialOrder:0,...}
    return this._fb.group({
        EmailType: [data.template.from, Validators.required],
        name: [data.template.name, Validators.required],
        subject: [data.template.subject, Validators.required],
        'from': [data.template.from, [Validators.required, ValidationService.emailValidator]],
        'body': [data.template.body, [Validators.required]],
        'active': [data.template.active],
        'confidential': [data.template.confidential],
        'numberOfDaysToWait': [data.numberOfDaysToWait, Validators.required],
        'sequentialOrder': [data.sequentialOrder, Validators.required]
    });
 }

Итак, вы можете добавить в свой массив с помощью 

control.push(this.addAddress(null));
//or
control.push(this.addAddress(data));

. Вы можетеиспользовать на ngOnInit 

this.usermodel.items =   this.items
this.secondForm = this._fb.group({
        items: this._fb.array(items.map(data=>this.addAddress(data))
    });
}

items.map, конвертировать ваш массив элементов в массив formGroup

...