除了 angular 4 中的数据更新输入外，表单数据传递为 null

Question

我有一个有 2 个字段的表单，我在页面加载时为这些输入分配了默认值，当我通过更改一个输入字段提交表单时，更新后的输入具有请求中的值，而另一个字段保持为空.当我提交表单时，如何获得分配给输入的所有默认值以及更新的输入。

我有以下代码：

abc.component.html

<form #orgUpdateForm=ngForm class="form" (submit)="onOrganizationFormSubmit()" method="PUT">
     <div class="form-group" style="padding:0">
       <label class="control-label">Organization Name</label>
       <input class="form-control ng-touched" type="text" name="organization_name" value="{{organization.organization_name}}" [(ngModel)]="orgForm.organization_name">
     </div>

     <div class="form-group" style="padding:0">
       <label class="control-label">Number of Branches</label>
       <input class="form-control ng-touched" type="number" name="num_branches" value="{{organization.num_branches}}" min="0" [(ngModel)]="orgForm.num_branches">
      </div>
      <br/>
      <div class="col-md-2 col-sm-4 col-xs-4" style="padding:0">
        <input class="btn" type="submit" value="Update" style="background:transparent;border:1px solid black">
      </div><br/>
 </form>

abc.component.ts

import { Component, OnInit } from '@angular/core';

import * as $ from 'jquery';
import '../../../assets/js/preferences.js';
import { JarwisService } from '../../services/jarwis.service.js';

@Component({
  selector: 'app-preferences',
  templateUrl: './preferences.component.html',
  styleUrls: ['./preferences.component.css'],
  providers: [JarwisService]
})
export class PreferencesComponent implements OnInit {

  organization:any;
  user:any;
  orgUpdateResponse:any;

  orgName : any;
  numBranches : any;

  public orgForm = {
    organization_name : this.orgName,
    num_branches : this.numBranches
  }

  constructor(
    private Jarwis:JarwisService
  ) { }

  ngOnInit() {

    this.Jarwis.getOrganizationDetails().subscribe(
      data => {
        this.organization = data;
      }
    )

    $.preferences.activate();

  }

  organizationForm(){
    this.Jarwis.getOrganizationDetails().subscribe(
      data => {
        this.organization = data;
      }
    )
  }

  onOrganizationFormSubmit(){
    this.Jarwis.setOrganizationDetails(this.orgForm).subscribe(
      data => {
        this.organization = data
      }
    )
  }

  branchesForm(){
    this.Jarwis.getBranches().subscribe(
      data => {
        this.organization = data;
      }
    )
  }

}

Answer 1

这是示例工作示例。

注意：- 我使用双向数据绑定方法进行绑定。 删除了 value={{}} 属性..

sample.html 文件

<form #orgUpdateForm="ngForm" class="form" (submit)="onOrganizationFormSubmit(orgUpdateForm.value)">
  <div class="form-group" style="padding:0">
    <label class="control-label">Organization Name</label>
    <input class="form-control ng-touched" type="text" name="organization_name"  [(ngModel)]="organization.organization_name">
  </div>

  <div class="form-group" style="padding:0">
    <label class="control-label">Number of Branches</label>
    <input class="form-control ng-touched" type="number" name="num_branches" min="0" [(ngModel)]="organization.num_branches">
   </div>
   <br/>
   <div class="col-md-2 col-sm-4 col-xs-4" style="padding:0">
     <input class="btn" type="submit" value="Update" style="background:transparent;border:1px solid black">
   </div><br/>
</form>

sample.ts 文件

export class SampleComponent  {
  organization:any;

  constructor() {

//here iam assigning default values in constructor. you assign value wherever in your logics.

    this.organization={
      organization_name:"Sample",
      num_branches:10
    };
  }

  onOrganizationFormSubmit(FormValue:any)
  {
    console.log("Form Value From Inputs",FormValue);
  }
}

你的问题已经解决我已经测试过了。请试一次。

谢谢，

除了 angular 4 中的数据更新输入外，表单数据传递为 null

Form data passing as null except for the data updated inputs in angular 4

ng-bind-html

ngmodel

angular