Как не запустить неверную форму - Bootstrap Forms - PullRequest
Новая
       46

Как не запустить неверную форму - Bootstrap Forms

0 голосов
/ 23 сентября 2019

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

<form [formGroup]="simuladorForm" class="was-validated">
    <div class="row">
        <div class="col-md-12">
            <div class="form-row">
                <div class="col-md-6 mb-6">
                    <label for="empresa">Empresa<span> *</span></label>
                    <input type="text" class="form-control is-invalid" formControlName="empresa"
                        placeholder="Empresa LTDA" id="empresa" required>
                    <div *ngIf="simuladorForm.controls['empresa'].invalid && (simuladorForm.controls['empresa'].dirty || simuladorForm.controls['empresa'].touched)"
                        class="invalid-feedback">
                        <div *ngIf="simuladorForm.controls['empresa'].errors.required">
                            Empresa é obrigatório.
                        </div>
                    </div>
                </div>
                <div class="col-md-6 mb-6">
                    <label for="cnpj">CNPJ<span> *</span></label>
                    <input type="tel" class="form-control is-invalid" formControlName="cnpj" mask="00.000.000/0000-00"
                        placeholder="00.0000.000/0000-00" id="cnpj" required>
                    <div *ngIf="simuladorForm.controls['cnpj'].invalid && (simuladorForm.controls['cnpj'].dirty || simuladorForm.controls['cnpj'].touched)"
                        class="invalid-feedback">
                        <div *ngIf="simuladorForm.controls['cnpj'].errors.required">
                            CNPJ é obrigatório.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

enter image description here

1 Ответ

0 голосов
/ 23 сентября 2019

Вы не можете управлять этим.

Граница существует благодаря загрузочному способу обработки элементов управления.Если вы посмотрите на класс:

enter image description here

Как вы можете видеть, это обрабатывается Bootstrap и говорит, что если элемент управления недействителен, то онпроверяет его как недействительный.

Чтобы удалить его, вы можете удалить required из своего элемента управления и проверить его действительное состояние непосредственно перед его отправкой.Проблема в том, что у вашего элемента управления будет зеленая граница, потому что он считается действительным.

Итак ... Не используете Bootstrap?

...