Форма данных, передаваемая как ноль, за исключением данных, обновленных входных данных в угловых 4

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

Вот пример рабочего примера.

Примечание: - Iam-привязка с использованием двухстороннего метода привязки данных. удаленное значение ={{}} атрибут..

файл 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);
  }
}

Ваша проблема была решена. давайте попробуем это один раз, пожалуйста.

Спасибо,