1

我想在提交表单时在日期选择器上显示错误消息，但我发现没有办法这样做。

isRequiredErrorMessage 仅在字段失去焦点且值为空时有效。

但是，如果用户从不关注日期选择器字段，那么我无法将消息设置为错误标签。

我希望 DatePicker 可以有 errorMessage，这样我就可以做类似的事情

render() {
  return (
    <DatePicker
      label="Pick up date"
      isRequired={true}
      minDate={moment().toDate()}
      onSelectDate={(date) => {this.setState({pickUpDate: date})}}
      strings={DayPickerStrings}
      errorMessage={this.state.pickUpDateErrorMessage}
    />
  );
}

onSubmitForm() {
  if (isNaN(this.state.pickUpDate)) {
    this.setState({
      pickUpDateErrorMessage: "Can't be empty"
    })
  }
}

请建议如何在提交表单时验证 datePicker 组件。

4

2 回答 2

2

我有类似的需要在 DatePicker 上显示错误消息，并且想要与 office-fabric-ui-react 中的其他输入组件类似的 errorMessage API。我终于发现 Datepicker 作为文本字段属性，因为它本质上使用 TextField，因此您可以将 ITextFieldProps 传递给它。

示例解决方案：-

<DatePicker
name="someDate"
id="someDate"
isRequired={true}
textField={{ errorMessage: "someErrorMessage" }}
/>

以下是文档链接：-

https://docs.microsoft.com/en-us/javascript/api/office-ui-fabric-react/idatepickerprops?view=office-ui-fabric-react-latest#textfield

于 2020-05-23T06:46:41.093 回答
0

看起来您正在使用 TypeScript。尝试使用您自己的具有errorMessage属性的类扩展 DatePicker 类。

export class MyDatePicker extends DatePicker {
    public constructor(props: {}) {
        super(props);
    }

    errorMessage: string = '';
}

然后调用您自己的 MyDatePicker 组件来代替原始 DatePicker 组件。

于 2020-04-02T00:15:00.973 回答