Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import {Component, OnInit} from '@angular/core';
- import {FormGroup, FormArray, FormControl} from '@angular/forms';
- @Component({
- selector: 'app-services-cu',
- templateUrl: '../pages/fileuploader-cu.component.html'
- })
- export class FileuploaderCuComponent implements OnInit {
- uploader: FormGroup;
- constructor() {
- }
- ngOnInit() {
- this.uploader = new FormGroup({
- sections: new FormArray([
- this.initSection(),
- ]),
- });
- }
- initSection() {
- return new FormGroup({
- beforeImage: new FormControl(''),
- afterImage: new FormControl('')
- });
- }
- addSection() {
- const control = <FormArray> this.uploader.get('sections');
- control.push(this.initSection());
- }
- getSections(form) {
- return form.controls.sections.controls;
- }
- removeSection(i) {
- const control = <FormArray> this.uploader.get('sections');
- control.removeAt(i);
- }
- onSubmit(form) {
- console.log(this.uploader);
- }
- }
- <div class="row">
- <div class="col-md-12 col-sm-12 col-xs-12">
- <div class="x_panel">
- <form [formGroup]="uploader" novalidate (ngSubmit)="onSubmit(uploader)">
- <!--- Section -->
- <div class="row">
- <div formArrayName="sections">
- <div class="row" *ngFor="let section of getSections(uploader); let i = index">
- <div class="col-md-12 col-sm-12 col-xs-12">
- <div [formGroupName]="i">
- <!---Uploader Section -->
- <div class="col-sm-12 col-md-4">
- <div class="input-group margin-bottom-sm">
- <label>Before:</label>
- <input type="file" formControlName="beforeImage" accept=".jpeg, .jpg, .png" class="form-control">
- <span style="font-size:12px;">(Formats:jpeg, jpg, png Size: 1MB)</span>
- </div>
- </div>
- <div class="col-sm-12 col-md-4">
- <div class="input-group margin-bottom-sm">
- <label>Before:</label>
- <input type="file" formControlName="afterImage" accept=".jpeg, .jpg, .png" class="form-control">
- <span style="font-size:12px;">(Formats:jpeg, jpg, png Size: 1MB)</span>
- </div>
- </div>
- <!---End of Uploader Section -->
- </div>
- <br>
- <button type="button" (click)="addSection()" class="btn btn-info btn-sm">Add More</button>
- <button type="button" class="btn btn-danger btn-sm" *ngIf="getSections(uploader).length > 1"
- (click)="removeSection(i)">Remove Section
- </button>
- </div>
- </div>
- </div>
- </div>
- <!-- End Section -->
- </form>
- <pre> {{uploader.value | json}} </pre>
- </div>
- </div>
- </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement