使用 ion-scroll 标签时的表单验证错误答案

【问题标题】：Form validation error when using ion-scroll tag使用 ion-scroll 标签时的表单验证错误
【发布时间】：2015-08-01 20:04:48
【问题描述】：

我正在创建一个 Ionic 应用程序，但在使用标签时遇到了一些表单验证问题。这是我的表格：

<form ng-show="!success" name="form" role="form" novalidate ng-submit="register()" show-validation>
    <div class="list list-inset">
        <label class="item item-input">
            <input type="text" class="form-control" name="firstName" placeholder="Nome"
                   ng-model="registerAccount.firstName" ng-minlength=1 ng-maxlength=50 required maxlength="50">
        </label>
        <div ng-show="form.firstName.$dirty && form.firstName.$invalid" class="padding-top padding-left assertive">
            <p class="help-block"
               ng-show="form.firstName.$error.required">
                some message
            </p>
        </div>
        .
        .
        .
        <label class="item item-input">
            <input type="password" class="form-control" name="password" placeholder="Senha"
                   ng-model="registerAccount.password" ng-minlength=5 ng-maxlength=50 required>
        </label>
        <div ng-show="form.password.$dirty && form.password.$invalid" class="padding-top padding-left assertive">
            <p class="help-block"
               ng-show="form.password.$error.required">
                some message
            </p>
        </div>
        <label class="item item-input">
            <input type="password" class="form-control" name="confirmPassword" placeholder="Repita a senha"
                   ng-model="confirmPassword" ng-minlength=5 ng-maxlength=50 required>
        </label>
        <div ng-show="form.confirmPassword.$dirty && form.confirmPassword.$invalid" class="padding-top padding-left assertive">
            <p class="help-block"
               ng-show="form.confirmPassword.$error.required">
                some message
            </p>

            <p class="help-block"
               ng-show="form.confirmPassword.$error.minlength">
                Sua confirmação de senha precisa ter no mínimo 5 caracteres.
            </p>

            <p class="help-block"
               ng-show="form.confirmPassword.$error.maxlength">
                Sua confirmação de senha deve ser menor que 50 caracteres.
            </p>
        </div>
    </div>

    <div class="form-button">
        <button type="submit" class="button button-block button-balanced">Criar conta</button>
        </small>
    </div>
</form>

当没有 Ionic 的标签时，此表单可以正常工作，但是，当我在表单标签内部或外部添加 ion-scroll 标签时，验证失败，提示密码和确认密码是不同的。我应该在表单中使用特定的 Ionic 标签吗？我应该使用哪个标签？

【问题讨论】：

我最近遇到了同样的错误。您找到任何修复方法了吗？
@tryingtolearn 我忘记了这个问题......原因是因为 Ionic 的元素使用它自己的范围。稍后我将详细回答这个问题
太好了，谢谢。我正在努力寻找有关该主题的信息，因此您可以提出任何建议的工作将不胜感激。
您能提供什么见解？
@tryingtolearn 我回答了这个问题，也许它对你有帮助

标签： angularjs cordova ionic-framework ionic

【解决方案1】：

问题是因为有些 ionic 的组件使用了子作用域，这种作用域"creates an 'isolate' scope that does not prototypically inherit." 我使用推荐的使用“。”的最佳实践解决了我的问题。（点）在我的模型中。所以我改变了：

<input type="password" ng-model="confirmPassword" required>

到

<input type="password" ng-model="something.confirmPassword" required>

【讨论】：