Question

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

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>

任何帮助将不胜感激，或者任何建议的阅读内容也将非常有用。谢谢

Answer 1

请使用反应式表单方法处理更复杂的表单

首先为您要创建表单的字段创建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/

正确绑定值以防止重复

1 个答案: