I'm creating an Ionic app and I'm having some issues with form validation when I use < ion-scroll> tag. This is my form:
<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>
This form is working correctly when there is no Ionic's tag, however, when I add a ion-scroll tag, either inside or outside form tag, the validation fails saying that password and confirm password are different. Should I use a specific Ionic tag with form? Which could be the tag I should use?
The problem is because some ionic's components uses child scope, this kind of scope "creates an 'isolate' scope that does not prototypically inherit." I solved my problem using the recommended best practice of use "." (dot) in my models. So I changed:
<input type="password" ng-model="confirmPassword" required>
to
<input type="password" ng-model="something.confirmPassword" required>