How to append data dynamically in Angular

Question

I have generated a form dynamically in Angular, and it's picking from a server and it displays the fields based on the server response. Now I want to pick the new values that the user has entered since it's an edit form and save in a database. How can I append the data that am getting onto the FormData(). Here is my code...

EditComponent.ts

@Component({
  selector: 'app-form-edit',
  templateUrl: './form-edit.component.html',
  styleUrls: ['./form-edit.component.css']
})
export class FormEditComponent implements OnInit {
  id: string
  name: string
  formGroup: FormGroup
  errorsFound: any = null;
  successFeedBack: any = null;


  submitted = false;
  initProgress = false;

  districts;
  subCounties;
  villages;
  district: string = null

  dataTable: any
  formId: string;
  data;

  constructor(
    private router: Router,
    private route: ActivatedRoute,
    private formService: FormService,
    private formBuilder: FormBuilder,
    private locationService: LocationService
  ) {
  }

  dataFormGroup: FormGroup;


  ngOnInit() {
    this.id = this.route.snapshot.params.id;
    this.formId = this.route.snapshot.params.formId;

    console.log(this.id)

    this.formService.getFormForShow(this.id, this.formId).subscribe((data: any) => {
      console.log(data)
      this.data = data
      let group = {}
      data.forEach(t => {
        group[t.key] = new FormControl('')
      })
      this.dataFormGroup = new FormGroup(group);
    })

  }

//convenience getter for easy access to form fields
  get f() {
    return this.dataFormGroup.controls;
  }


  onSubmit() {

    this.submitted = true;
    this.initProgress = true;

    const newValues = this.dataFormGroup.value
    console.log(newValues)
    // console.log(this.dataFormGroup.value)

    const formData = new FormData(); // how can i append the data here.


    console.log(formData)

    this.formService.updateForm(this.id, this.formId, newValues).subscribe(data => {
      if (data == 'okay') {
        this.router.navigate(['/'])
      } else {
        console.log("form failed")
      }
      this.initProgress = false;
    }, error => {
      console.log(error);
      this.errorsFound = 'Something went wrong please try again later!';
      this.initProgress = false
    })
  }

}

EditComponent.html

<div class="container-fluid"  >
  <div class="row" style="padding: 0; margin-bottom: 3px;">

    <div class="row" style="background: #446AD8;padding: 5px;border-radius: 0px;border: 1px solid #ddd;margin-left: 15px;margin-bottom: 20px;width: 100%;">
      <ul id="Menu" class="nav nav-pills margin-top-small">
        <li class="active" style="margin-left: 10px">
          <a   title="Form" routerLink=""> <i class="fa fa-list"></i> &nbsp;Form Data</a>
        </li>
      </ul>
    </div>
  </div>

  <div class="row" style="margin-top: 25px">
    <div class="col-md-12">
      <div>
        <form (ngSubmit)="onSubmit()" style="margin-left: 20px!important;" *ngIf="dataFormGroup">
          <div class="row" *ngFor="let item of data"  >
            <div class="col-lg-3 label-div" >
              <label><b>{{item.key.replace("__","").toUpperCase()}}:</b></label>
            </div>
            <div class="col-lg-8 form-group" [formGroup]="dataFormGroup" >
              <input type="{{item.type}}" class="form-control" style="width: 70%" formControlName="{{item.key}}" [placeholder]="item.value"/>
            </div>
          </div>
          <div class="row">
            <div class="col-lg-3">
            </div>
            <div class="col-lg-8">
              <button type="submit" class="btn btn-primary">
                <div class="progress-loader" [hidden]="!initProgress">
                  <mat-progress-spinner [diameter]="30" [mode]="'indeterminate'" color="accent" style="background: white!important;"></mat-progress-spinner>
                </div>
                <div [hidden]="initProgress"> Update </div>
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>

</div>

score 1 · Accepted Answer · answered Mar 23 '21 at 10:13

1

The answer is on MDN https://developer.mozilla.org/fr/docs/Web/API/FormData/append.

Then, You'll have to provide formData to an http request. I'll let you read this answser from stackoverflow: How to send form data in a http post request of angular 2?

Note that we used httpClient to make Http Call since version 6. which is expressed here: https://angular.io/guide/http

This should be located in your service formService.

answered Mar 23 '21 at 10:13

AymericFi

140
1
8

Hello, thanks for the answer. Let me check it out. – makwasi Crispus Mar 23 '21 at 10:20
So the solution you suggested would work perfectly if I was using a static form in my opinion whereby I could directly assign. But am using a dynamic form and the values keep changing based on the table that's being returned from the DB. So how can i append without knowing the exact values? – makwasi Crispus Mar 23 '21 at 10:40

How to append data dynamically in Angular

1 Answers1