angularjs材料设计中的输入验证答案

【问题标题】：Input validation in angularjs material designangularjs材料设计中的输入验证
【发布时间】：2016-06-15 06:07:44
【问题描述】：

我有两种不同的情况。

案例一：

<md-input-container class="md-block">
    <label>Client Email</label>
    <input required type="email" name="clientEmail" ng-model="project.clientEmail"           minlength="10" maxlength="20" ng-pattern="/^.+@.+\..+$/" />
    <div ng-messages="projectForm.clientEmail.$error" role="alert">
      <div ng-message-exp="['required', 'minlength', 'maxlength', 'pattern']">
            Your email must be between 10 and 20 characters long and look like an e-mail address.
      </div>
    </div>
</md-input-container>

对于所有类型的错误，我们都显示相同的消息。是否可以有多个消息并相应地显示它们。例如 - 当为空时{此字段是必需的。} 当用户开始输入时，直到少于 10 个字符 {需要最少 10 个字符。} 当字符长度超过 20 {允许最大 20 个字符}

案例 2：

<md-input-container class="md-block">
    <label>Password</label>
    <input required type="password" name="password" ng-model="project.password"           minlength="6" maxlength="8" ng-pattern="/^[0-9]{6-8}$/" />
    <div ng-messages="projectForm.password.$error" role="alert">
      <div ng-message-exp="['required', 'minlength', 'maxlength', 'pattern']">
            Your password must be between 6 and 8 characters long.
      </div>
    </div>
</md-input-container>


<md-input-container class="md-block">
    <label>Repeat Password</label>
    <input required type="password" name="password2" ng-model="project.password2"           minlength="6" maxlength="8" ng-pattern="/^.+@.+\..+$/" />
    <div ng-messages="projectForm.password2.$error" role="alert">
      <div ng-message-exp="['required', 'minlength', 'maxlength', 'pattern']">
            Your password must be between 6 and 8 characters long.
      </div>
    </div>
</md-input-container>

有什么方法可以让我们将当前字段值与其他字段匹配。基本上这是用于密码和确认密码。我们将所有检查都放在密码字段中。在密码2中，我只需要检查它是否与密码相同并显示消息{确认密码与密码不同}直到两者都匹配。

【问题讨论】：

标签： angularjs material-design angularjs-material

【解决方案1】：

案例 1 的答案：是的，可以有多个消息并相应地显示它们。插入器：DEMO

<form name="form">
        <div class="form-group" ng-class="{'has-error': form.telephone.$dirty && form.telephone.$invalid}">
            <input id="Text5"
                   name="telephone"
                   placeholder="Enter phone number (only digits or spaces)"
                   type="text"
                   ng-model="ManageDetailsCtrl.ManageDetails.Phone"
                   class="form-control"
                   style="width: 100%;"
                   ng-minlength="11"
                   ng-maxlength="15"

                   required>
            <div ng-show="form.telephone.$dirty && form.telephone.$invalid">
                <span ng-show="form.telephone.$error.required" class="help-block">can't be blank</span>
                <span ng-show="form.telephone.$error.minlength" class="help-block"> is too short (min 11 characters)</span>
                <span ng-show="form.telephone.$error.maxlength" class="help-block"> is too long (max 15 characters)</span>
            </div>
            </div>
    </form>

【讨论】：