时间戳

首页 > 解决方案 > 正确绑定值以防止重复

javascript - 正确绑定值以防止重复

问题描述

我有 5 个字段供用户填写：离开代码、起始日期、输入时间 1、截止日期、输入时间 2。我将这些变量声明为我的 .ts 文件中的日期对象，如该片段所示。

interface Supervisor {
  name: string;
  code: string;
}
interface LeaveCode {
  name: string;
  code: string;
}

 ngOnInit() {
   this.dates = [ ];

  }
  supervisor2: Supervisor[];
  selectedSupervisor2: Supervisor;
  leaveCodes2: LeaveCode[];
  selectedLeaveCode2: LeaveCode;
  dates: {leaveCode:string, fromDate: string, fromTime: string, toDate:string, toTime:string}[];

  minDate: Date;
  maxDate: Date;
  fromDate: Date;
  toDate: Date;
  fromDateMin: Date;
  toDateMin: Date;
  fromDateMax: Date;
  toDateMax: Date;
  fromTime: Date;
  toTime: Date;

 if (this.dates.length < 8)
      this.dates.push({leaveCode:"",  fromDate: "", fromTime: "", toDate:"", toTime:""});
  }

在我的 .html 文件中，我已将这些字段声明如下。我的问题是，当我按下添加按钮以生成新的输入行时，输入上的值与该列中的其余值保持相同。我应该如何正确绑定这些值！

<p-dropdown [options]="leaveCodes2" [(ngModel)]="selectedleaveCodes2" name="selectedleaveCodes2" placeholder="Leave Code*" optionLabel="name" required></p-dropdown>

<p-calendar [showIcon]="true" [(ngModel)]="fromDate" name="fromDate" [minDate]="minDate" [readonlyInput]="true" placeholder="From Date*" id="setter" required></p-calendar>

<input type="text" [(ngModel)]="fromTime" name="fromTime" placeholder="Input Time*" style="height: 2.186em" size="7" maxlength="8" pInputText required>

<p-calendar [showIcon]="true" [(ngModel)]="toDate" name="toDate" [minDate]="minDate" [maxDate]="maxDate" [readonlyInput]="true" placeholder="To Date*" id="setter" required></p-calendar>

<input type="text" [(ngModel)]="toTime" name="toTime" placeholder="Input Time*" style="height: 2.186em" size="7" maxlength="8" pInputText required>

<button pButton type="button" id="addButton" icon="pi pi-plus" class="ui-button-success" (click)="onAddClicked()"></button>

任何帮助将不胜感激，或者任何建议的阅读材料也会很有用。谢谢

标签： javascripthtmlangulartypescript

解决方案

请使用反应形式方法来获得更复杂的形式

首先为要制作表单的假设字段创建 FormGroup。这里我猜字段是

public dateForm: FormGroup = new FormGroup({
  selectedleaveCodes2: new FormControl(''), 
  fromDate: new FormControl(''),
  fromTime: new FormControl(''),
  toDate: new FormControl(''),
  toTime: new FormControl(''),
});

现在将其添加到您的主 formGroup 假设主 formGroup 是

public mainForm: FormGroup = new FormGroup({
  dateFields: new FormArray([]);
});

现在假设您想在 formArray 中添加另一个项目，让我们创建一个辅助方法来完成从mainForm添加dateForm的工作

  private getDateForm(): FormGroup {
      return new FormGroup({
          selectedleaveCodes2: new FormControl(''), 
          fromDate: new FormControl(''),
          fromTime: new FormControl(''),
          toDate: new FormControl(''),
          toTime: new FormControl(''),
        });
   }

现在在 FormArray 中添加新项目

this.mainForm.get('dateFields').push(this.getDateForm());

在索引处删除

this.mainForm.get('dateFields').removeAt(index);

现在在 html 中你必须这样做

<div *ngFor="let group in mainForm.get('dateFields')['controls'];let i = index">
  <div [formGroup]='group'>
    <p-calendar formControlName="selectedleaveCodes2"></p-calendar>
    <p-calendar formControlName="fromDate"></p-calendar>
    <p-calendar formControlName="fromTime"></p-calendar>
    <p-calendar formControlName="toDate"></p-calendar>
    <p-calendar formControlName="toTime"></p-calendar>
  </div>
</div>

现在在提交调用中->

const value = this.mainForm.value;

看起来像 

{
     dateFields: [{
        selectedleaveCodes2: "your data",
        fromDate: "your data",
        fromTime: "your data",
        toDate: "your data",
        toTime: "your data",
    }, 
    {
        selectedleaveCodes2: "your second data",
        fromDate: "your second data",
        fromTime: "your second data",
        toDate: "your second data",
        toTime: "your second data",
    }]
}

欲了解更多信息

https://alligator.io/angular/reactive-forms-formarray-dynamic-fields/

推荐阅读