Я представляю простую форму ниже с помощью редукционной формы, и она отлично работает. Теперь я бы хотел, чтобы кнопка отправки была отключена в еще одной ситуации: Если какая-либо из Field
имеет ошибку (т.е. Она meta.error
установлена).
Из lokking в документы, я полагаю, что окружающим <form>
не известно, есть ли в его компонентах <Field>
ошибка. Может быть, у кого-то есть идея, как решить ее так же просто, как использовать disabled={hasErrors || submitting || pristine}
const EditBlogEntryForm = ({ onSubmit, reset, handleSubmit,
pristine, submitting, ...rest }) => {
console.log('rest: ', rest);
return (
<form onSubmit={handleSubmit(onSubmit)}>
<div className="form-group">
<Field name="title"
type="text"
component={renderField}
label="Titel"
className="form-control"
placeholder="Titel eingeben..." />
</div>
<div className="form-group">
<Field name="text"
component={renderTextArea}
label="Text"
className="form-control"
placeholder="Textinhalt eingeben..." />
</div>
<div className="form-group">
<Field name="image"
type="text"
component={renderField}
label="Bild-URL:"
className="form-control"
placeholder="Bildadresse eingeben..." />
</div>
<div>
<button type="submit" className="btn btn-default"
disabled={submitting || pristine}>
Blogeintrag speichern
</button>
<button type="button" className="btn btn-default"
disabled={pristine || submitting}
onClick={reset}>
Formular leeren
</button>
</div>
</form>
);
};