如何在Angular中动态附加数据

Question

我在 Angular 中动态生成了一个表单，它从服务器中挑选，并根据服务器响应显示字段。现在我想选择用户输入的新值，因为它是一个编辑表单并保存在数据库中。如何将正在获取的数据附加到 FormData() 上。这是我的代码...

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>

Answer 1

答案在 MDN https://developer.mozilla.org/fr/docs/Web/API/FormData/append。

然后，您必须向 http 请求提供 formData。 我会让你从 stackoverflow 阅读这个答案：How to send form data in a http post request of angular 2?

请注意，我们从版本 6 开始使用 httpClient 进行 Http 调用。此处表示：https://angular.io/guide/http

这应该位于您的服务formService。