角度验证 - 不显示消息答案

【问题标题】：Angular Validation - Not showing message角度验证 - 不显示消息
【发布时间】：2017-12-26 13:43:48
【问题描述】：

基本上我已经准备好 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-touched 都在 firstName 输入上。我错过了什么？

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

如果还有其他有用的信息，请告诉我。我对 Angular 还是很陌生。

********编辑********

根据要求进行状态配置。该页面进入 index.html 嵌套 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'
    })

【问题讨论】：

你也可以把你的状态配置放在一边
@ParvSharma 刚刚将其添加到原始帖子中。
您的表单上是否设置了name 属性？我没有办法快速检查它，但我不相信admission-form 是一个正确的名称。尝试将其从 name="admission-form" 更改为 name="admissionForm" 然后 <div ng-show="admissionForm.$submitted" ......
@TomekSułkowski .....哇，原来如此。没有意识到“-”是不允许的。非常感谢。如果您将其发布为答案，我会接受。
@Crash667 好的，我将添加一个带有实际推理的答案，所以它看起来并不神奇；）

标签： angularjs validation

【解决方案1】：

看 AngularJS documentation

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

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

当您在模板中添加<form name="admission-form"> 时，Angular 尝试创建一个$scope.admission-form = ... 属性，作为JavaScript 表达式没有意义，所以它只是惨遭失败并且没有创建任何东西。

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

【讨论】：

感谢您的帮助。解释得很好。