Как правильно проверить динамически добавленные поля? - PullRequest
Новая
       7

Как правильно проверить динамически добавленные поля?

0 голосов
/ 15 октября 2019

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

Я пытался сделать это с помощью vue, а класс Request -не уверен, что происходит и почему это не работает. Моим идеальным решением было бы сделать это из vue, чтобы форма не могла быть сохранена без проверки правильности полей.

В настоящее время вопрос сохраняется в любом случае, даже если есть только один вариант или ни один из них. У меня есть то, что два поля всегда есть, но они могут быть сохранены без добавления чего-либо внутри, так что наличие этих двух всегда равносильно отсутствию.

Это мой код формы, в который добавляются поля 

<div v-if="form.response_type_id === 2">
    <el-divider></el-divider>
    <el-row>
        <el-col :span="22">
            <p class="el-form-item__label">Opciones</p>
        </el-col>
        <el-col :span="2">
            <div class="btn-link-plus action-button" @click="addOption()">
                <i class="fas fa-plus"></i>
            </div>
        </el-col>
    </el-row>
    <div v-for="(option, index) in questionOptions" :key="index">
        <el-row>
            <el-col :span="22">
                <el-form-item prop="option">
                    <el-input v-model="option.option"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="2">
                <div class="btn-link-delete action-button" @click="removeOption(index)"
                    :disabled="trashDisabled">
                        <i class="fas fa-trash-alt"></i>
                </div>
            </el-col>
        </el-row>
    </div>
</div>

Это данные из скрипта 

questionOptions: [
    {
        option: ''
    },
    {
        option: ''
    },
],

В моих правилах в vue, если ясделать это, параметры всегда отображаются как недействительные, даже если они заполнены, и я не могу сохранить, даже если входные данные не пусты. 

rules: {
question: {required: true, message: 'question required', trigger: 'blur'},
response_type_id: {required: true, message: 'answer type required', trigger: 'blur'},
option: {required: true, message: 'options are required', trigger: 'blur'},
},

Это мой файл класса запроса, он несохранить его в базе данных вообще, однако он также не показывает никаких ошибок, в vue он говорит, что он был сохранен правильно, но не сохраняет его, если я изменю эту строку на эту 'questionOptions' => 'required_if:response_type_id,2|array|min:2' без .*все сохраняется без каких-либо проблем, без опций, с одной опцией и двумя или более, что не то, что я хочу. 

public function rules()
{
    return [
        'question' => 'required',
        'response_type_id' => 'required|exists:response_types,id',
        'questionOptions.*' => 'required_if:response_type_id,2|array|min:2',
    ];
}

Какой правильный способ сделать это? В идеале это было бы на стороне .vue, но если это невозможно, я возьму это в любом месте.

...