Я визуализировал избыточную форму динамических полей, которые принимают либо строковый ввод от пользователя, либо логическое значение, которое является полем выбора, имеющим раскрывающееся меню, в котором пользователь может выбрать «да» или «нет». Значения формы Redux инициализируют логические поля значением false. Следующий код принимает объект, который динамически отображает избыточные поля, передавая массив этих объектов:
Строковые поля ввода: {имя: "stateCode", длина: 100, заголовок: "State", тип: "string", обязательный: true}
Логические поля ввода: {имя: "исправлено", длина: 5, заголовок: "исправлено", тип: "логическое значение", обязательное значение: true}
Массив этих объектов извлекается из базы данных внутренним кодом и отправляет их во внешний интерфейс. Массив объектов различается в зависимости от того, какую из 250 различных форм заполняет пользователь, каждая из которых имеет подмножество из 80 возможных полей, которые являются обязательными для этой формы. Следующий код показывает, как я создаю поля формы и проверяю ввод пользователя:
const booleanMenuItems = [
<MenuItem key = {0} value={ false } primaryText={"No"}></MenuItem>,
<MenuItem key={1} value={true} primaryText={"Yes"}></MenuItem>
];
const additionalEdiFields = this.props.ediAdditionalFields == null ? null : this.props.ediAdditionalFields.map(field =>
{
if(field.type == "string"){
return <Field
key = {field.name}
name = {field.name}
component={ TextField }
floatingLabelText= {field.title}
floatingLabelStyle={ styles.floatingLabelStyle }
style={styles.extraFields}
>
</Field>
}
if(field.type == "boolean"){
return <Field
key = {field.name}
name = {field.name}
component = {SelectField}
floatingLabelText= {field.title}
floatingLabelStyle={ styles.floatingLabelStyle }
style={styles.extraFields}
>
{booleanMenuItems}
</Field>
}
}
);
const validate = (values, state) => {
const errors = {};
let additionalEdiFields = state.ediAdditionalFields == null? [] : state.ediAdditionalFields.map((extraField) => {
return extraField;
});
const requiredFields = [
{name: "legalEntityId", length: 32, title: "Legal Entity Id", type: "string", required: true},
{name: "stateCode", length: 100, title: "State", type: "string", required: true},
{name: "filingFormName", length: 100, title: "Return", type: "string", required: true},
{name: "filingFrequencyId", length: 100, title: "Filing Frequency", type: "string", required: true},
{name: "dueDayOfFilingPeriod", length: 100, title: "Due Date", type: "string", required: true},
{name: "defaultAssignedTo", length: 100, title: "Assigned To", type: "string", required: true},
{name: "filingType", length: 100, title: "Filing Type", type: "string", required: true},
{name: "paymentType", length: 100, title: "Prepayments", type: "string", required: true},
{name: "effectiveDateMonth", length: 2, title: "Effective Month", type: "string", required: true},
{name: "effectiveDateYear", length: 4, title: "Effective Year", type: "string", required: true},
{name: "hasNoExpirationDate", length: 20, title: "Has No Expiration Date", type: "string", required: true}
];
let allFields = additionalEdiFields.concat(requiredFields);
allFields.forEach((field) => {
if(field != undefined) {
if (!values[field.name]) {
if (field.required == true) {
if (field.name === 'hasNoExpirationDate' && !values.expirationDateMonth) {
errors.expirationDateMonth = 'Required';
}
if (field.name === 'hasNoExpirationDate' && !values.expirationDateYear) {
errors.expirationDateYear = 'Required';
}
if (field.name !== 'hasNoExpirationDate' && field.type != "boolean") {
errors[field.name] = 'Required';
}
}
}
if (values[field.name]) {
if (values[field.name].length > field.length) {
errors[field.name] = 'Too Long';
}
}
}
});
return errors
};Когда форма загружается, я хочу, чтобы все логические поля отображали «Нет» в поле выбора по умолчанию, если только пользователь не изменит его на «Да». В настоящее время при отображении формы все поля остаются пустыми. Если пользователь вообще не вводит какие-либо данные для логических полей, ему по-прежнему разрешено щелкнуть «Сохранить», что отправляет значение false для этого поля в серверную часть. 
Как видите, в поле «Исправлено» установлено значение «Нет», которое я ввел вручную. Я хочу, чтобы форма загружалась с отображением «Нет» в поле выбора вместо пустого по умолчанию. Моя настоящая цель – не допустить сохранения этой формы, если пользователь не ввел да или нет в одно из этих логических полей. Один из способов обхода (именно так мой код был ранее) У меня не было логической проверки последнего оператора if для обязательных полей: field.type != "boolean"
Когда я пропускаю эту часть кода, пользователь не может сохранить форму, не выбрав да или нет, иначе это поле будет выделено красным цветом с требуемым словом под ним (посмотрите на поле Идентификатор пакета передачи, которое я оставил пустым и попытался спасти). Однако в этом случае выбор «Нет» не работает. Система выдает требуемую ошибку, несмотря на то, что выбран ввод «Нет». Поэтому я добавил оператор if. Но теперь они могут вообще не вводить данные в это поле. Хотя он по-прежнему будет успешно передавать «Нет» или «ложь» серверной части, я не могу использовать эту функциональность с точки зрения продукта.
Мне нужно одно из двух решений:
- Загрузите страницу, показывающую «Нет» в этих полях (даже если это просто текст или визуальная вещь с помощью css. Значение все еще может быть пустым, что в любом случае будет считаться ложным, поэтому я хочу, чтобы он показывал «Нет»). Боковое примечание: если я сохраню поле поля без ввода. Затем войдите в панель редактирования для этой формы, «Нет» отображается как предыдущий ввод пользователя при загрузке страницы. Это потому, что он считывает состояние предыдущего пользовательского ввода. Возможно, есть способ заполнить это состояние при первоначальном создании формы, но поля динамические. Возможно, единственным выходом является обращение к жестко закодированному списку всех возможных логических полей из 80 возможных полей, но я хотел бы избежать этого подхода.
or
- Удалите оператор if, сделайте поле обязательным, но разрешите передачу «Нет» вместо того, чтобы форма считывала это как отсутствие ввода. (Я полагаю, что, поскольку логические значения по умолчанию инициализируются значением false для избыточных значений, он читает «Нет» как значение «нет» и говорит, что это требуется, но не уверен в этом на 100%). Я также открыт для других решений, которые не являются одним из этих двух, если моя цель выше достигнута.
