Question

基本上我已经准备好使用angularjs验证来进行下面的示例。

<input type="text" maxlength="60" class="form-control" id="inputFirstName" name="firstName" placeholder="" ng-model="formData.firstName" required="">
    <div ng-show="admission-form.$submitted || admission-form.firstName.$touched">
        <span ng-show="admission-form.firstName.$error.required">First Name is required<br></span>
    </div>

所以我可以让css在无效时突出显示该字段，但我仍然没有收到要显示的消息。我从chrome的开发工具中看到，ng-invalid-required和ng-touching都在firstName输入上。我错过了什么？

其他一些说明：我确实有一个名为admission-form的表单，但它在另一个html文件中并从angular-ui-router定向到它。所有表单页面都嵌套在同一个控制器下。

如果有任何其他信息有帮助，请与我们联系。我对角度还是比较新的。

******** ******** EDIT

根据请求状态配置。该页面是index.html nests form.html，它嵌套表单的每个页面。在personalInformation.html页面中输入的内容。

angular.module('admissionsApp', ['ui.router', 'ui.mask', 'ui.bootstrap'])

.config(function($stateProvider, $urlRouterProvider) {

$stateProvider
    // route to show our basic form (/form)
    .state('home', {
        url: '/home',
        templateUrl: 'home.html',
        controller: 'HomeController'
    })
    .state('form', {
        url: '/form',
        templateUrl: 'form.html',
        controller: 'FormController'
    })
    .state('form.personalInfo', {
        url: '/personalInfo',
        templateUrl: 'personalInformation.html'
    })

Answer 1

查看AngularJS documentation

表单是FormController的一个实例。表单实例可以可选择使用名称属性发布到范围。

这意味着当您在AngularJS中的name元素上添加<form>属性时（例如<form name="myForm">），它会在$scope上创建一个表单对象，因此它就像你在你的控制器中做$scope.myForm = ...一样。

当您将<form name="admission-form">放入模板时，Angular会尝试创建一个$scope.admission-form = ...属性，因为JavaScript表达式没有意义，所以它只是失败而且没有成功。创造任何东西。

AngularJS是AngularJS，当它在模板中遇到奇怪的东西时，它会默默地执行它，而且没有错误......

角度验证 - 未显示消息

1 个答案: