Как добавить необходимое правило к вводу antd с начальным значением undefined?

Я создал form как компонент, который используется в компонентах create и update. поэтому, когда create использует этот компонент формы, я не передаю никаких реквизитов в качестве начальных значений для полей формы. Но внутри обновления я передаю инициалы после того, как они были получены с сервера.

<FormItem {...formItemLayout} >
   {getFieldDecorator('username', { initialValue: user.username || null }, {
       rules: [{ required: true, message: "نام کاربری را وارد کنید." }]
   })(
     <Input
      type="text"
      placeholder="نام کاربری"/>
   )}
</FormItem>

Я ожидаю, что поле username будет проверено, как и раньше, я не добавлял initialValue. Но после отправки я не получаю никаких ошибок, как перед добавлением initialValue, если username пуст.


reactjs validation forms antd
person szero    schedule 04.12.2017    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Я думаю, что вы не поместили initialValue в нужное место, попробуйте это (у меня работает):

<FormItem {...formItemLayout} >
  {getFieldDecorator('username',  {
   initialValue: user.username || null,
   rules: [{ required: true, message: "نام کاربری را وارد کنید." }]
  })(
  <Input
   type="text"
   placeholder="نام کاربری"/>
 )}
</FormItem>
person Adel.D    schedule 27.11.2018

arrow_upward
1
arrow_downward

Вместо initialValue вы можете использовать метод setFieldsValue и установить начальные значения для ваших меток следующим образом:

setInitialValues = () => {
    const { form } = this.props;
    form.setFieldsValue({
        username: user.username
    });
};

Ваша форма должна остаться прежней, просто избавьтесь от initialValue:

<FormItem {...formItemLayout} >
{getFieldDecorator('username', {
   rules: [{ required: true, message: "نام کاربری را وارد کنید." }]
})(<Input
  type="text"
  placeholder="نام کاربری"/>
)}
</FormItem>

И не забудьте вызвать функцию setInitialValues ​​в componentDidMount:

componentDidMount() {
    this.setInitialValues();
}
person Julia M    schedule 28.06.2018

arrow_upward
0
arrow_downward

Как насчет добавления необходимого атрибута в тег ввода? Нравится:

<Input
  type="text"
  placeholder="نام کاربری" 
  required/>

И, в конце концов, чтобы установить сообщение об ошибке, вам нужно будет использовать атрибут validationErrors

Конечный результат будет выглядеть так:

<Input
  type="text"
  placeholder="نام کاربری" 
  required
  validationErrors={{
      isDefaultRequiredValue: 'Field is required'
  }}/>
person Delphin RUKUNDO    schedule 28.06.2018