使用AngularJS进行验证
使用AngularJS进行验证
提问于 2019-01-30 17:24:51
我们想用AngularJS做一个验证。我有两个屏幕，第一个“保险数据”和第二个“其他”，这是由标题重定向的，也就是说，如果我给一个<header of uib-tab = "Other" class = "btn-sm">，我会重定向到“其他”屏幕。当‘Other’我需要‘投保数据’的数据有效时，如果有效的数据可以在屏幕上更改，如果不能，‘Other’的标题将为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>然后在'Other‘的页眉中放入ng-disabled = "datosAsegurado.$invalid"
我知道这很糟糕，但是我想不出其他的办法了，希望你能帮助我，谢谢！
回答 1
Stack Overflow用户
发布于 2019-01-30 23:42:01
我可能错了，但据我所知，如果您想在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。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54437179
复制相关文章
相似问题
腾讯云开发者
