We Keep Coding

Getting the field of form angular

I have a form with some fields.
I'm validating the fields with css classes:(if the field is invalid and the user touched it, then input's border-color = red.)
select.ng-invalid.ng-touched,
input.ng-invalid.ng-touched,textarea.ng-invalid.ng-touched {
border-color: red;
}
If the user submits the form without filling one or more field, there would be a danger alert.
HTML:
<div ng-show="formInvalid>
error!
</div>
JS:
if ($scope.pniyaForm.$valid) {
$scope.formInvalid = false;
.....
} else {
$scope.formInvalid = true;
}
But, If the user submits the form and has not touched any of the field, the css classes don't influence.(because user didn't touch...)
I want to add the class in the code.
Does anyone have an idea for an elegant way to do this without writing it on each field separately?

A possible solution:
when you are executing your form function, add the following line into it.
$scope.$apply(function () {});
this line will cause the ng $scope.$watch() run and apply changes if they exist.
may work, may not work, read the following link for deeper understanding of the issue.
http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

Using ng-class validation in angularjs
<div class="form-group">
<label>Name</label>
<input type="text" required ng-model="name" name="name" ng-class="{'has-error': myForm.name.$invalid}" />
</div>
<div class="form-group">
<label>Age</label>
<input type="text" required ng-model="age" name="age" ng-class="{'has-error': myForm.age.$invalid}" />
</div>

If the user submits the form and has not touched any of the field, the css classes don't influence
You need to provide an initial defined value to an ngModel and at least provide the required attribute to an input.
Use ngClass to conditionally apply css classes in case some form parts are invalid
<form name="myform">
<div class="form-group" ng-class="{'has-error': myform.myinput.$invalid}">
<input name="myinput" ng-model="myName" class="...." required>
</div>
....
</form>
....
// in controller
$scope.myName = "cats"; // form is valid
$scope.myName = ""; // form is invalid, and the css class 'has-error' will be applied
Then use ngDisables in your submit button to prevent submission in case the form is invalid
<button type="submit" ng-disabled="myform.$invalid">submit</button>

Angular JS - Notify the user if form is successfully submitted using HTML element

I am new to Angular JS and using it as the framework for my client-side JavaScript. I want to notify the user if the form is successfully submitted using HTML element (not an alert which the user requires to click "OK" in order to continue input). I used ngShow to show the element when the form is submitted. Below is the code of the element.
<p ng-model="successMessage" ng-show="isSuccess"></p>
However, it does not suit me because I am refreshing the page after the user submitted form successfully. As you know, this will cause the variables in $scope refreshed.
$route.reload();
To overcome that, I tried to not refreshing the page. Instead, I emptied all the models on my controller. Yet, it does not work well for me because I am using Angular form validation i.e. !frmRegister.address.$pristine and frmRegister.address.$invalid for all my input. Using these, I am displaying error message if the user has touched the input element, but the input content is still not right. Below is the example.
<div class="form-group row" ng-class="{ 'has-danger' : frmRegister.name.$invalid && !frmRegister.name.$pristine }">
<label class="col-2 col-form-label">Employee Name</label>
<div class="col-10">
<input class="form-control" ng-class="{ 'form-control-danger' : frmRegister.name.$invalid && !frmRegister.name.$pristine }" type="text" placeholder="Enter name..." id="txtName" name="name" ng-model="name" ng-maxlength="50" required autofocus>
<p ng-show="frmRegister.name.$invalid && !frmRegister.name.$pristine" class="form-control-feedback">Name is required.</p>
<p ng-show="frmRegister.name.$error.maxlength" class="form-control-feedback">Name is too long.</p>
</div>
</div>
As I was not refreshing the page and only emptying the model, the error messages are raised due to the input has been touched.
How can I achieve to display a success message on submitted form using Angular? Any help would be appreciated.

If the$route.reload is important, you could also tack on ?success=true or similar to your route before the reload:
...
$route.updateParams({success:"true"});
$route.reload();
...
Inject $routeParams into your controller and check accordingly:
function Controller($scope, $routeParams) {
if($routeParams && !!$routeParams.success){
$scope.showSuccessMessage = true;
}
}

<p> tag don't support ng-model, you have to use ng-bind. and if you successfully changed value of isSuccess, I think it will showup with ng-bind.
refer the below example about ng-model and ng-bind.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app ng-init="data='test';iSuccess=true;">
<h3>Shown nothing by ng-model</h3>
<p ng-model="data" ng-show="iSuccess"></p>
<h3>Shown by ng-bind</h3>
<p ng-bind="data" ng-show="iSuccess"></p>
<button ng-click="iSuccess=!iSuccess">Toggle</button>
</div>

Well, without reloading,
you can clear your form through this code during submit.
$scope.yourFormModel = {};
$scope.yourFormName.$setPristine(true);
$scope.yourFormName.$setUntouched(true);
It will clear your form like it is untouched without refreshing the page.
Also, in your success message, use this code instead
<div ng-show="isSuccess">
{{successMessage}}
</div>

Adding Default Value To Text Input Angular 2

Background
I have a form with an input field containing the user's email address. I am using interpolation to add the email to the placeholder field.
Problem
I do not want the user to be able to change the email address in this field. I only want them to be able to see it. But I do want it to post with the form.
Question
I keep trying different ways and no matter what the form does not post the email. How can I bind it so that it will actually post the email address when the form is submitted?
Examples
I tried with readonly. That way they would not be able to change it.
<input type="text" class="form-control" id="email" [(ngModel)]="personal.email" name="email" #email="ngModel" placeholder="{{auth.user.email}}" value="{{auth.user.email}}" readonly>
I tried without readonly just to see if it would work if I do not add any restriction flags.
<input type="text" class="form-control" id="email" [(ngModel)]="personal.email" name="email" #email="ngModel" placeholder="{{auth.user.email}}" value="{{auth.user.email}}">
I know the email is accessible because I am adding it to the placeholder field and it shows up in the form. It just wont post.

The default value will be the value assigned to personal.email.
Alternatively you can bind to a different property
[(ngModel)]="personalEmail"
and assign a default value to personalEmail and on submit update persona.email in code or use
[ngModel]="personalEmail" (ngModelChange)="personal.email = $event"
to get the initial value from personalEmail and update personal.email when changes happen
This might also work (not tried)
[ngModel]="personal.email || 'defaultValue'" (ngModelChange)="personal.email = $event"
to only get 'defaultValue' assigned if personal.email is null

Here model is personal.email and the default value is auth.user.email
<input type="text" class="form-control" id="email" [(ngModel)]="personal.email = auth.user.email" name="email" #email="ngModel">

AngularJS form validatation of auto-generated form

I am trying to validate an auto-generated form (via AngularJS v1.3) which inputs' names are in format:
form_name[field_name]
The very basic example would be:
<form name="morgageCalculator">
<input type="text" class="form-control"
name="morgageCalculator[homeValue]" value="0"
data-ng-model="data.homeValue" required="required"/>
</form>
As you can see, the input name is morgageCalculator[homeValue]. Now I would like to add an error message below it:
<div class="error"
data-ng-show="!morgageCalculator.morgageCalculator[homeValue].$pristine && morgageCalculator.morgageCalculator[homeValue].$invalid">
Please enter a number
</div>
For very obvious syntax reasons this expression is not valid:
morgageCalculator.morgageCalculator[homeValue].$pristine
But this one also does not work:
morgageCalculator["morgageCalculator[homeValue]"].$pristine
So, the question, is there any sane way of accessing those fields? I wouldn't mind moving the validation to some controller function, but I was faced with same issue of inability to access field object.
Any help/hint would be greatly appreciated.

With help of #dfsq from comment section, I was able to find the error. Unlike my SO question, my code was missing data-ng-model.
Validation will not fire at all if input was not bound to model....
The correct snippet:
<form name="morgageCalculator">
<input type="text" class="form-control"
name="morgageCalculator[homeValue]" value="0"
data-ng-model="data.homeValue" required="required"/>
<div class="error"
data-ng-show="!morgageCalculator['morgageCalculator[homeValue]'].$pristine && morgageCalculator['morgageCalculator[homeValue]'].$invalid">
Please enter a number
</div>
</form>

Angular show errors only when input not empty and invalid

I'm trying to toggle an error area on my form that only triggers once there is some input, it's a bit silly to have the errors all appear if the user hasn't started typing yet.
<form name="registerForm">
<input type="email" name="email" ng-model="email" required />
</form>
<span ng-show="registerForm.email.$invalid">
Invalid email.
</span>
This works fine once I'm typing but I want it to show no errors if the input is empty. I've tried using the model ng-hide="!email.length" but can't get it to work.

<span ng-show="registerForm.email.$invalid && registerForm.email.$dirty>

Try this:
<span ng-show="registerForm.email.$invalid && email>