Проверка с помощью AngularJS

Question

Мы хотим сделать проверку с AngularJS.У меня есть два экрана, первый «Застрахованные данные» и второй «Другой», который перенаправляется заголовками, то есть, если я даю перенаправления <header of uib-tab = "Other" class = "btn-sm"> me на экран «Другие».Когда «Другие» мне нужно, чтобы данные «Застрахованных данных» были действительными, если действительные из них могут быть изменены на экране, если нет, заголовок «Другие» будет disabled.Это небольшая часть моего кода:

<uib-tab heading="Datos del asegurado" class="btn-sm">
        <legend>Datos del Asegurado de Vida</legend>
        <div class="collapsedDetalle" >
            <div layout-gt-sm="row" class="margin-top-20">
                <md-input-container class="md-block" flex-gt-sm>
                    <label>Nombre</label>
                    <input name="nombre" ng-model="$ctrl.datos.DATOS_TOMADOR.NO_NOMBRE" required>
                </md-input-container>
                <md-input-container class="md-block" flex-gt-sm>
                    <label>Primer apellido</label>
                    <input ng-model="$ctrl.datos.DATOS_TOMADOR.NO_APELLIDO1" required>
                </md-input-container>
                <md-input-container class="md-block" flex-gt-sm>
                    <label>Segundo apellido</label>
                    <input ng-model="$ctrl.datos.DATOS_TOMADOR.NO_APELLIDO2" required>
                </md-input-container>
            </div>
        </div>
    </uib-tab>  
    <uib-tab heading="Otros" class="btn-sm">
        <legend>Modalidad</legend>
        <div class="collapsedDetalle">
            <div layout="row">
                <div flex-gt-sm="50">
                    <label>Modalidad</label>
                </div>
            </div>
        </div>
    </uib-tab>

Это должно быть подтверждено, если имя, первая фамилия и вторая фамилия заполнены.Я пытался сделать это:

<uib-tab name="datosAsegurado" heading="Datos del asegurado" class="btn-sm">
            <legend>Datos del Asegurado de Vida</legend>
            <div class="collapsedDetalle" >
                <div layout-gt-sm="row" class="margin-top-20">
                    <md-input-container class="md-block" flex-gt-sm>
                        <label>Nombre</label>
                        <input name="nombre" ng-model="$ctrl.datos.DATOS_TOMADOR.NO_NOMBRE" required>
                        <span style="color:red" ng-show="datosAsegurado.nombre.$dirty && datosAsegurado.nombre.$invalid">
                        <span ng-show="datosAsegurado.nombre.$error.required">Nombre requerido</span>
                    </md-input-container>
                    <md-input-container class="md-block" flex-gt-sm>
                        <label>Primer apellido</label>
                        <input ng-model="$ctrl.datos.DATOS_TOMADOR.NO_APELLIDO1" required>
                    </md-input-container>
                    <md-input-container class="md-block" flex-gt-sm>
                        <label>Segundo apellido</label>
                        <input ng-model="$ctrl.datos.DATOS_TOMADOR.NO_APELLIDO2" required>
                    </md-input-container>
                </div>
            </div>
        </uib-tab>  
        <uib-tab ng-disabled="datosAsegurado.$invalid" heading="Otros" class="btn-sm">
            <legend>Modalidad</legend>
            <div class="collapsedDetalle">
                <div layout="row">
                    <div flex-gt-sm="50">
                        <label>Modalidad</label>
                    </div>
                </div>
            </div>
        </uib-tab>

В первом заголовке я назначаю имя (datosAsegurado), имя действительно так:

<span style="color:red" ng-show="datosAsegurado.nombre.$dirty && datosAsegurado.nombre.$invalid">
                        <span ng-show="datosAsegurado.nombre.$error.required">Nombre requerido</span>

А затем в заголовок«Другое» я положил ng-disabled = "datosAsegurado.$invalid"

Я знаю, что это довольно плохо, но я не могу думать ни о чем другом, я надеюсь, что вы можете помочь мне, СПАСИБО!

Answer 1

Я могу ошибаться, но, насколько я знаю, если вы хотите использовать проверки в AngularJS, вы должны иметь соответствующие входные данные в форме.Чтобы получить доступ к проверкам формы, вы должны указать имя формы.Кроме того, любые кнопки или ссылки, которые будут проверять проверки, должны быть ограничены этими тегами формы.Т.е.:

<form name='insuredAndOtherData'>
  ...
  <span style="color:red" ng-show="insuredAndOtherData.nombre.$dirty && 
  insuredAndOtherData.nombre.$invalid">
  ...
</form>

Вы также можете просто проверить, что форма в целом действительна, не ссылаясь на определенные входные данные, например: "insuredAndOtherData. $ Valid".

Проверьте эту страницу длябольше проверок для обоих входов конкретно или форм в целом: https://www.w3schools.com/angular/angular_validation.asp.