Question

我试图在AngularJS的帮助下编写注册表单并使用Bootstrap进行样式设置。我有一些工作，但我很确定如果我对Angular有更多的了解，这可以大大改善。到目前为止，我已经......

用户名字段：

<div class="container" ng-controller="validateCtrl">
<form name="myForm">

<div class="form-group has-feedback" ng-class="{true: 'has-success'}[myForm.email.$dirty]" ng-class="{true: 'has-error'}[myForm.email.$invalid]">

<label for="email">Email</label>
<input class="form-control" type="email" name="email" ng-model="email" ng-maxlength="254" placeholder="Enter Email" required>
<span class="glyphicon glyphicon-remove form-control-feedback" ng-show="myForm.email.$dirty && myForm.email.$invalid"></span>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
  <span ng-show="myForm.email.$error.required">Email is required!</span>
  <span ng-show="myForm.email.$error.email">Invalid email address!</span>
  <span ng-show="myForm.email.$error.maxlength">Email is too long!</span>
</span>
<span class="glyphicon glyphicon-ok form-control-feedback" ng-show="myForm.email.$dirty && !myForm.email.$invalid"></span>

</div>

密码字段：

<div class="form-group has-feedback" ng-class="{true: 'has-success'}[myForm.password.$dirty]" ng-class="{true: 'has-error'}[myForm.password.$invalid]">

<label for="password">Password</label>
<input class="form-control" type="password" name="password" ng-model="password" ng-minlength="5" ng-maxlength="255" placeholder="Enter Password" required>
<span class="glyphicon glyphicon-remove form-control-feedback" ng-show="myForm.password.$dirty && myForm.password.$invalid"></span>
<span style="color:red" ng-show="myForm.password.$dirty && myForm.password.$invalid">
  <span ng-show="myForm.password.$error.required">Password is Required!</span>
  <span ng-show="myForm.password.$error.minlength">Password is too short!     </span>
  <span ng-show="myForm.password.$error.maxlength">Password is too long!</span>
</span>
<span class="glyphicon glyphicon-ok form-control-feedback" ng-show="myForm.password.$dirty && !myForm.password.$invalid"></span>

</div>

密码确认：

<div class="form-group has-feedback" ng-class="{true: 'has-success'}[myForm.passwordrepeat.$dirty]" ng-class="{true: 'has-error'}[myForm.passwordrepeat.$invalid]">

<label for="passwordrepeat">Confirm Password</label>
<input class="form-control" type="password" name="passwordrepeat" ng-model="passwordrepeat" placeholder="Confirm Password" required compare-to="password"> 
<span class="glyphicon glyphicon-remove form-control-feedback" ng-show="myForm.passwordrepeat.$dirty && myForm.passwordrepeat.$invalid"></span>
<span style="color:red" ng-show="myForm.passwordrepeat.$dirty && myForm.passwordrepeat.$invalid">
  <span ng-show="myForm.passwordrepeat.$error.required">Second Password is Required!</span>
  <span ng-show="myForm.passwordrepeat.$error">Passwords do not match!</span>
</span>
<span class="glyphicon glyphicon-ok form-control-feedback" ng-show="myForm.passwordrepeat.$dirty && !myForm.passwordrepeat.$invalid"></span>

</div>

提交按钮：

<button 
  class="btn btn-primary" 
  ng-disabled=
  "myForm.email.$invalid || 
   myForm.password.$invalid ||
   myForm.passwordrepeat.$invalid">
  Register
</button>

</form>
</div>

有人可以建议我如何使这段代码更简洁吗？对于初学者，可以改进这个条件ng-class表达式......

<div class="form-group has-feedback" ng-class="{true: 'has-success'}[myForm.passwordrepeat.$dirty]" ng-class="{true: 'has-error'}[myForm.passwordrepeat.$invalid]">

...这基本上说，如果字段很脏，那么如果它有效，则添加“已成功”字样。元素添加＆＃39; has-error＆＃39;。是否有更清洁的方法来实现这一目标......

<span ng-show="myForm.email.$error.required">Email is required!</span>
<span ng-show="myForm.email.$error.email">Invalid email address!</span>
<span ng-show="myForm.email.$error.maxlength">Email is too long!</span>

而不是列出每个错误？最后，是否有一种在html模板中编写这样的长表达式的首选方法...

"myForm.email.$dirty && !myForm.email.$invalid"

我试图了解指令并且我使用密码确认，但我不认为他们会在这里产生很大的不同（但我可能会错误）。

非常感谢有关最佳做法的任何帮助/建议！

Answer 1

你的问题有点模糊，但是这里有一些很棒的文章可以帮助你寻找更好的基于角色的形式：）

提交AJAX表单：AngularJS方式
https://scotch.io/tutorials/submitting-ajax-forms-the-angularjs-way

AngularJS表单验证
https://scotch.io/tutorials/angularjs-form-validation

因为你正在使用Bootstrap和Angular：
如何正确使用BootstrapJS和AngularJS
https://scotch.io/tutorials/how-to-correctly-use-bootstrapjs-and-angularjs-together

<!-- FORM -->
<!-- pass in the variable if our form is valid or invalid -->
<form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate> <!-- novalidate prevents HTML5 validation since we will be validating ourselves -->

    <!-- NAME -->
    <div class="form-group">
        <label>Name</label>
        <input type="text" name="name" class="form-control" ng-model="name" required>
    </div>

    <!-- USERNAME -->
    <div class="form-group">
        <label>Username</label>
        <input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8">
    </div>

    <!-- EMAIL -->
    <div class="form-group">
        <label>Email</label>
        <input type="email" name="email" class="form-control" ng-model="email">
    </div>

    <!-- SUBMIT BUTTON -->
    <button type="submit" class="btn btn-primary">Submit</button>

</form>

// create angular controller
validationApp.controller('mainController', function($scope) {

    // function to submit the form after all validation has occurred            
    $scope.submitForm = function(isValid) {

        // check to make sure the form is completely valid
        if (isValid) {
            alert('our form is amazing');
        }

    };

});

如何编写更简洁的AngularJS表单？

1 个答案: