Question

我正在学习角度离子，目前正在尝试使用角形式，FormGroup和FormBuilder功能来验证某些表单数据。

我想要相互验证四个字段，但我不知道如何编写一个可以看到其他字段值的验证器。

相关领域是：

startDate, startTime, endDate, endTime.

由于这些是离子日期时间输入，因此它们始终采用“ISO 8601”格式。所以示例值可能是：

startDate: "2018-03-28"
startTime: "18:52"

我的目标是验证每一项，以便在开始时间和日期在结束时间和日期之前有效。例如，所有四个字段在以下情况下都有效：

startDate is "2018-03-28",
startTime is "14:30",
endDate is "2018-03-28", and
endTime is "18:00"

所有四个字段都无效，例如：

startDate is "2018-03-28",
startTime is "14:30",
endDate is "2018-02-24", and
endTime is "23:00"

如何使用角度形状特征比较这些字段的值？

任何帮助将不胜感激！

Answer 1

解决方案是创建一个子FormGroup并将其嵌套在主FormGroup中（使用FormBuilder）。

我的.ts文件中的代码如下所示：

  this.timingSubForm = new FormGroup({
    startDate: new FormControl('', Validators.compose([Validators.required])),
    startTime: new FormControl('', Validators.compose([Validators.required])),
    endDate: new FormControl('', Validators.compose([Validators.required])),
    endTime: new FormControl('', Validators.compose([Validators.required]))
  },
    (formGroup: FormGroup) => {
      return TimeValidator.validateTimes(formGroup);
    }
  );


  this.createItemForm = formBuilder.group({
    itemTitle:  ['', Validators.compose([Validators.minLength(4),Validators.maxLength(100), Validators.required])],
    itemDescription: ['', Validators.compose([Validators.minLength(10),Validators.maxLength(10000), Validators.required])],
    timingSubForm: this.timingSubForm
  });

模板文件如下所示：

<form [formGroup]="createItemForm">
    .. some input fields ..
    <div formGroupName="timingSubForm">
        .. date specific input fields ..
    </div>
    .. some more input fields ..
</form>

如何在角度2+ formbuilder中比较两个字段的值以进行验证

1 个答案: