Question

我创建了一个反应式表单，其中ID是动态生成的<input type="number" name="orgi" id="orgId" class="form-control" formControlName="OrganizationId" value="{{idValue}}">，在发回时，我需要手动键入它。还有其他方法可以发送ID而不触摸输入字段吗？我想隐藏田野。

event-list.component.html文件：

<form id="creat-Event" [formGroup]="createEvent" (ngSubmit)="onsave(createEvent.value)">
<div class="container">
  <h3 class="page_header">List of Events</h3>
  <hr>

  <!--Creating top buttons-->
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 buttons">
    <!--a class="btn btn-primary pull-left buton" routerLink="/dashboard" role="banner" aria-expanded="false">
      To &nbsp;Dashboard
    </a-->
    <a class="btn btn-primary pull-right buton" data-toggle="collapse" href="#addOrganizationPanel" role="button"
      aria-expanded="false" aria-controls="addOrganizationPanel" onclick="tableCollapse()">
      Add New Event
    </a>
  </div>
  <!-- Buttons created -->

  <!-- Creating Event Form Input Elements -->
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <div class="collapse" id="addOrganizationPanel" style="margin-top:1%;">
      <div class="card card-body">
        <h3 class="page_header" style="text-align:center;">Add Event</h3>
        <hr>
        <div class="col-lg-7 col-lg-offset-3">
          <div class="form-group">
            <label class="control-label" for="orgName">Your Organization</label>
            <input type="text" name="org" id="orgName" class="form-control" formControlName="Organization" placeholder="Enter Organization Name">
          </div>

<!-- [(ngModel)]="orgName" [ngModelOptions]="{standalone: true}" -->

          <div class="form-group">
            <label for="eventName" class="control-label">Event Name</label>
            <input type="text" name="eventName" id="event" class="form-control" formControlName="EventName">
          </div>
          <div class="col-lg-6 col-xs-12 col-sm-12 col-md-6">
            <div class="form-group shortbox clear">
              <label class="control-label" for="startDate">Start Date</label>
              <input type="date" name="start_date" id="start-date" class="form-control" formControlName="StartDate">
            </div>
          </div>
          <div class="col-lg-6 col-xs-12 col-sm-12 col-md-6" style="padding-right: 0px;">
            <div class="form-group shortbox clear">
              <label class="control-label" for="endDate">End Date</label>
              <input type="date" name="end_date" id="end-date" class="form-control" formControlName="EndDate"> 
            </div>
          </div>
          <div class="form-group clear">
            <label for="location" class="control-label">Location</label>
            <input type="text" name="location" id="location" class="form-control" formControlName="Location">
          </div>
          <div class="form-group">
            <label class="control-label" for="orgId">Organization Id</label>
            <input type="number" name="orgi" id="orgId" class="form-control" formControlName="OrganizationId" value="{{idValue}}">
          </div>
         </div>
       </div>
      </div>
     </div> 
    </div>
   </form>

event-list.component.ts文件：

createEvent:FormGroup;
constructor (fb: FormBuilder, private httpService: HttpClient, private _ser: SendUsingApiService, 
  private actiRoute:ActivatedRoute, private route: Router) {
    // assign a value
    //this.myAngularxQrCode = this.elText;
    this.createEvent=fb.group({
      "Organization":['', [Validators.required]],
      "EventName":['', Validators.required,],
      "StartDate":['', [Validators.required]],
      "EndDate":['', [Validators.required]],
      "Location":['', Validators.required],          
      "OrganizationId":[Number, [Validators.required]],
      //"EnableCPT":['', Validators.required]; 
    });

}

makeLink(){
  this.orgName = this.createEvent.controls["Organization"].value;
  this.elText = this.serverName + this.orgName;
  this.myAngularxQrCode = this.elText;
  return this.elText;
}

  ngOnInit() { //Using web-api to fetch event list.    
this.idValue = this.actiRoute.snapshot.params.Id;
console.log(this.idValue);
this.createEvent["OrganizationId"] = this.idValue;
this.httpService.get('url/StudyExcelAPI/api/GetEventMasterByOrganisationId?Id='+this.idValue).subscribe(
  data => {
    this.eventList =  data as string [];
    // this.eventList = Array.from(Object.keys(this.eventList), k=>this.eventList[k]);
    // this.eventList.push(this.eventList);
    console.log(this.eventList);
    this.val.emit(this.idValue);
  },
  (err:HttpErrorResponse) => {
    console.log(err.message);
  }
);

  onsave(data){
// this.createEvent["OrganizationId"] = this.idValue;["OrganizationId"]
console.log(this.createEvent);
// this._ser.createEvent(data).subscribe((result) => { console.log(result) });

我想将动态设置的“ OrganizationId”发送到服务器。即使使用了this.createEvent["OrganizationId"] = this.idValue;，它也不会消失。

Answer 1

替换您的onsave方法代码。

 onsave(data){
this.createEvent.controls.OrganizationId.setValue(this.idValue);

用于将值传递给服务器。尝试使用以下代码：

this.createEvent.value;

也可以在构造函数中替换以下代码：

"OrganizationId":['', [Validators.required]],

如何在Angular 6中在提交时将动态绑定表单字段发送到服务器

1 个答案: