This is the video of the bug http://youtu.be/siOfUluPraA
and below is my code.
It seems that
ng-show=true for a split second
signinForm.$submitted = true for a split second
Login.html
<ion-view>
<ion-content ng-controller="SignInCtrl">
<div class="login-logo">
<div><h4>LOGIN TO YOUR ACCOUNT</h4></div>
</div>
<form name="signinForm" novalidate>
<div class="list login">
<!-- input username -->
<label class="item item-input item-top"
ng-class="{'form-has-error' : signinForm.username.$invalid && signinForm.username.$submitted}">
<img src="./img/profile6.png" class= "image-thumb" alt="">
<input type="text"
name="username"
ng-model="user.username"
ng-minlength="5"
required placeholder="Name or National Id">
</label>
<!-- validation username -->
<div class="form-errors"
ng-show="signinForm.username.$error && signinForm.$submitted"
ng-messages="signinForm.username.$error"
ng-messages-include="templates/formerrors/form-errors-username.html">
</div>
</div>
</form>
</ion-content>
</ion-view>
form-errors-username.html
<div class="form-error" ng-message="required">This field is required.</div>
<div class="form-error" ng-message="minlength">This field is must be at least 5 characters.</div>
config.js
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('signin', {
url: '/sign-in',
templateUrl: 'templates/login.html',
controller: 'SignInCtrl'
});
$urlRouterProvider.otherwise('/sign-in');
});
What is the best practice?
Thanks in advance!
***** UPDATE *****
I used ng-if="signinForm.$submitted"
instead of ng-show.
Your HTML template is briefly displayed by the browser in its raw (uncompiled) form, while your application is loading.
You can try to use ngCloack to avoid the flicker effect.
<div ng-show="form.$submitted" ng-cloak>
Here's how I fixed it, I used
ng-if="signinForm.$submitted"
instead of ng-show.
Related
I have created a login form using angular reactive form. I've facing some strange behavior
If I submit the form using the submit button, I get the latest values which I've entered. If I submit the form using Enter key, then the value received is not latest. I've added the code below, can anyone pls suggest what i'm doing wrong.
ngOnInit() {
this.loginForm = this.formBuilder.group(
{
username: new FormControl(),
password: new FormControl(),
RememberMe: []
},
{
updateOn: 'blur'
}
);
}
login() {
const formvalue = this.loginForm.value;
console.log(formvalue);
return;
}
<div class="limiter">
<div class="container-login100 img-bg">
<div class="wrap-login100">
<img class="logo-center" src="../../../../assets/images/logo-big.png" />
<form [formGroup]="loginForm">
<div class="ui segment">
<h2>Login Form</h2>
<div class="ui form" >
<div class="required inline field">
<label>Username</label>
<div class="ui left icon input">
<i class="user icon"></i>
<input type="text" name="Username" placeholder="username" formControlName="username" >
</div>
</div>
<div class="required inline field">
<label>Password</label>
<div class="ui left icon input">
<i class="lock icon"></i>
<input [type]= "'password'" placeholder="password" formControlName="password" >
</div>
</div>
<div class="field login-ckeck">
<sui-checkbox>
Remember me
</sui-checkbox>
</div>
<button [ngClass]= "'ui primary button'" (click)= "login()">Submit</button> Forgot your password?
</div>
</div>
</form>
</div>
<!-- <footer class="footer">footer</footer> -->
</div>
</div>
Found the solution, it was an error from my side.
I had to change the updateOn to submit, for my code to work
this.loginForm = this.formBuilder.group(
{
username: new FormControl(),
password: new FormControl(),
RememberMe: []
},
{
updateOn: 'submit'
}
);
You can listen to either the forms (ngSubmit) or directly to the (keyup.enter) event and trigger the event then.
<form (ngSubmit)="login()">
<form (keyup.enter)="login()">
I have looked extensively on ways to fix this issue and I have tried many suggestions, but have yet to solve the problem. I have an Ionic 1 (1.7.16) app, which has a login page that has input fields. When the user taps on the input field the content on the page gets pushed out of view. Then when the keyboard is closed, the content aligns it self correctly.
I have installed the ionic keyboard and implemented cordova.plugins.keyboard.disablescroll(true) and this does not work.
Here is an example of my function that runs when ionic is ready
.run(function ($ionicPlatform) {
$ionicPlatform.ready(function () {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false);
cordova.plugins.keyboard.disablescroll(true)
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
Here is the login page:
<ion-view view-title="Login" align-title="left">
<ion-content class="loginBackground">
<div class="hero no-header flat">
<div class="content">
<div class="app-icon"></div>
<h1>TEST</h1>
</div>
</div>
<div class="padding">
<button class="button button-block icon-left ion-social-facebook button-positive" ng-click="facebookSignIn()">Login with Facebook</button>
</div>
<div class="list list-inset">
<label class="item item-input">
<input type="text" placeholder="Username" ng-model="data.name">
</label>
<label class="item item-input">
<input type="password" placeholder="Password" ng-model="data.password">
</label>
</div>
<div class="padding">
<button class="button button-block button-positive" ng-click="login()">Login</button>
</div>
<!--Register Now button-->
<div class="register">
<button class="button button-block button-clear hide-on-keyboard-open" ng-click="register()">Not signed up? Register now!</button>
</div>
<!--END Register Now button-->
</ion-content>
Any ideas?
I am trying to create a Login/Register dialog using Angular Material. The dialog should switch between a login page and a register page when you click the 'Switch' button.
Here is the dialog html
<md-dialog>
<md-dialog-content>
<div ng-if="lc.show_form == 'login'">
<form name="loginForm" ng-submit="loginForm.$valid && lc.login()" novalidate>
<md-input-container>
<label>Email</label>
<input type="email" name="email" required ng-model="project.email">
<div ng-messages="loginForm.email.$error" ng-if="loginForm.email.$dirty">
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
<md-input-container>
<label>Password</label>
<input type="password" name="password" required ng-model="project.password">
<div ng-messages="loginForm.password.$error" ng-if="loginForm.password.$dirty">
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
<md-button ng-click="lc.login()" class="md-raised md-primary">Login</md-button>
<md-button ng-click="lc.showRegister()">Switch</md-button>
</form>
</div>
<div ng-if="lc.show_form == 'register'">
<form name="registerForm" ng-submit="registerForm.$valid && lc.register()" novalidate>
<md-input-container>
<label>Email</label>
<input type="email" name="email" required ng-model="project.email">
<div ng-messages="loginForm.email.$error" ng-if="loginForm.email.$dirty">
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
<md-input-container>
<label>Password</label>
<input type="password" name="password" required ng-model="project.password">
<div ng-messages="loginForm.password.$error" ng-if="loginForm.password.$dirty">
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
<md-input-container>
<label>Password Confirm</label>
<input type="password_confirm" name="password_confirm" required ng-model="project.password_confirm">
<div ng-messages="loginForm.password_confirm.$error" ng-if="loginForm.password_confirm.$dirty">
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
<md-button ng-click="lc.register()" class="md-raised md-primary">Register</md-button>
<md-button ng-click="lc.showLogin()">Switch</md-button>
</form>
</div>
</md-dialog-content>
</md-dialog>
here is the controller code
angular.module('dialogDemo', ['ngMaterial'])
.controller('AppCtrl', function($mdDialog, $log) {
$mdDialog.show({
controller: 'dialogCtrl',
controllerAs: 'lc',
templateUrl: 'loginDialog.tmpl.html'
});
})
.controller('dialogCtrl', function($scope, $log) {
var self = this;
self.show_form = 'login';
self.showRegister = function() {
self.show_form = 'register';
console.log('show register');
};
self.showLogin = function() {
self.show_form = 'login';
console.log('show login');
};
});
Here is a plunker of what I am trying to accomplish.
http://plnkr.co/edit/nLeJHZB9XiIiiR9fPNEe?p=preview
Click the switch button. You will notice that the content changes, but if you click the switch button a second time the dialog only resizes, If you click it a third time it switches back. I am trying to figure out why it won't switch between the two views with only one click of the button.
Your plunker is working well for me.
I press login and i get the login modal, then i press register and the modal turns into register modal. If i press login again i get login modal.
pd: I am using chrome.
I have a directive, which successfully includes a template in my AngularJS app using Rails 4.2 and angular-rails-templates.
Everything seems to be working fine, even the two way data binding, although there is one exception. Form validation using AngularJS is lost if I include the <form> tag inside the template file.
When I run this in my local environment, Angular includes the template, display it on my main page. if you enter data the two way data binding updates, but the form validation is not handled by Angular, it uses HTML5 browser validation instead.
Any help appreciated, I assume there is some common thing I am missing, like how / when the template is inserted?
I have prepared a working demo at Plnkr, the same code executes without incident on Plnkr, but not when using Rails.
JS:
var app = angular.module('app', ['templates']);
app.config([
'$httpProvider', function($httpProvider) {
return $httpProvider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content');
}
]);
app.run(function() {
return console.log('angular app running');
});
app.directive('serviceRequest', function() {
return {
restrict: 'E',
templateUrl: 'service-request.html',
controller:function() {
this.request = {};
this.addService = function(request) {
//$http request
this.request = {};
}
},
controllerAs: 'service'
};
});
The HTML template (service-request.html):
<form name="myForm" novalidate="">
<div>
serviceForm is {{myForm.$valid}}
</div>
<fieldset>
<legend>Service Request</legend>
<h1>{{service.request.number}} <small>{{service.request.reported | date}}</small></h1>
<div class="row">
<div class="small-12 medium-10 large-10 small-centered">
<div class="row">
<div class="small-3 columns">
<label for="right-label" class="right">Number:</label>
</div>
<div class="small-9 columns">
<label>
<input type="text" ng-model="service.request.number" placeholder="small-9.columns" required/>
</label>
</div>
</div>
</div>
</div>
<div class="row">
<div class="small-12 medium-10 large-10 small-centered">
<div class="row">
<div class="small-3 columns">
<label for="right-label" class="right">Reported:</label>
</div>
<div class="small-9 columns">
<input type="text" ng-model="service.request.reported" placeholder="small-9.columns" required/>
</div>
</div>
</div>
</div>
<input type="submit" ng-disabled="myForm.$invalid ">
</fieldset>
</form>
I have a multi-page template set up. The first page has a set of links to the inner pages - however all but one link to the same #template page which loads data dynamically. The other link is to a form which I have built within the page.
Problem I'm having is when you navigate to one of the links, continue through the pages and then use the back button to get back to the first page, if you then click the link to the form it doesn't navigate to the #page, it goes to the last page you were on in the other links.
Hope that makes sense - maybe a diagram will make it clearer
home > product list > product detail
product detail > product list > home (back button)
home > contact form
This last step shows the product detail page again, instead of the contact form. It's as if it's not clearing the page out:
My code (truncated for clarity):
<script type="text/javascript">
$(document).bind("mobileinit", function () {
$.mobile.allowCrossDomainPages = true;
$.support.cors = true;
});
$(document).delegate("#pageDetail", "pagecreate", function () {
$(this).css('background', '#ECF2FE');//`this` refers to `#pageDetail`
});
$(document).bind("pagebeforechange", function (e, data) {
// We only want to handle changePage() calls where the caller is
// asking us to load a page by URL.
if (typeof data.toPage === "string") {
$.mobile.pageData = (data && data.options && data.options.pageData) ? data.options.pageData : null;
// We are being asked to load a page by URL, but we only
// want to handle URLs that request the data for a specific
// category.
var page;
var type;
var cat;
if ($.mobile.pageData && $.mobile.pageData.type) {
type = $.mobile.pageData.type;
}
if ($.mobile.pageData && $.mobile.pageData.cat) {
cat = $.mobile.pageData.cat;
}
if ($.mobile.pageData && $.mobile.pageData.page) {
page = $.mobile.pageData.page;
}
var url = $.url(data.toPage); // page url
var hash = url.fsegment(1).replace(/&.*/, ""); // nav hash for page holder
switch (hash) {
case "pageList":
$.ajax({
url: "http://localhost/myapp/" + type + ".aspx?type=" + type,
datatype: "html",
success: function (data) {
$('.submenu').html(data);
$('.title').html(type);
$('.submenu').trigger('create');
}
});
break;
case "pageDetail":
$('.detail').load('http://localhost/myapp/' + type + '.aspx?page=' + page + '&type=' + type + ' #contentdiv', function () {
$(this).trigger('create');
});
break;
default:
break;
}
}
});
</script>
</head>
HTML bits
<body>
<div data-role="page" id="home">
<div data-role="content">
<img src="images/Icon-Courses.png" alt="courses" /><br />
<img src="images/Icon-Contact.png" alt="contact" />
</div>
</div>
<div data-role="page" data-theme="a" id="pageList" data-add-back-btn="true" style="background-color:#F0F0F0 !important;">
<div data-role="header" data-position="fixed">
<h1 class="title">Products</h1>
</div>
<div data-role="content" class="submenu">
<!-- content gets put in here -->
</div>
</div>
<div data-role="page" data-theme="a" id="pageDetail" data-add-back-btn="true" style="background-color:#F0F0F0 !important;">
<div data-role="header" data-position="fixed">
<h1 class="title">Products</h1>
</div>
<div data-role="content" class="submenu">
<!-- content gets put in here -->
</div>
</div>
<div data-role="page" data-theme="a" id="contactForm" data-add-back-btn="true" class="detailpage" style="background-color:#F0F0F0 !important;">
<div data-role="header" data-position="fixed">
<h1 class="title">Contact Us</h1>
</div>
<div data-role="content" class="detail">
<div id="contentdiv" style="margin:10px auto;width:90%;">
<label for="name">Your Name</label>
<input type="text" id="name" style="width:90%;" data-mini="true" />
<label for="email">Email Address</label>
<input type="text" id="email" style="width:90%;" data-mini="true" />
<label for="phone">Phone Number</label>
<input type="text" id="phone" style="width:90%;" data-mini="true" />
<label for="comments">Enquiry / Comments</label>
<textarea id="comments" rows="80" style="width:90%;" data-mini="true"></textarea>
<br />
<input type="submit" id="submit" value="Send Enquiry Now" />
</div>
</div>
</div>
</body>
</html>
I'm using the jqm.page.params.js for handling the querystring parameters.
Is there anything obvious there? The links to the #pageDetail page are returned within the content shown on #pageList.
Don't understand why I can't seem to clear the cache and it doesn't navigate correctly to the contact form if you've been anywhere else first. if you go straight there it works fine.
Anyone shed any light? BTW this needs to work using PhoneGap as a standalone
Thanks
Actually feel a bit dim about this, but it's because I had the same class names on multiple divs and it was using those to import data - so when it was loading data remotely it was putting it in more than one place, overwriting the form at the same time...