I am trying to reset my form input value and it's not resetting the value nor the ngmodel control state.
here is my HTML:
TrackPage.html:
<form #trackForm="ngForm">
<div class="form__field" style="padding-top: 10px; ">
<search-input [(inputModel)]="trackingNumber" [label]="'tracking.tracking-placeholder' | translate">
</search-input>
</div>
<div>
<button id="trackBtn" type="button" class="track-button" [style.backgroundColor]="brand.style.mainColor"
(click)="searchTracking(); trackForm.reset()"
[style.color]="brand.style.fontColor">{{ 'tracking.tracking-btn' | translate | uppercase}}
</button>
</div>
</form>
Input Component:
<input id="trackingNumber" [(ngModel)]="inputModel" [ngClass]="{ 'form__field--has-value': inputModel }" type="text"
(ngModelChange)="changeData()" [required]="true" [style.font-family]="fontFamily" #spy />
<label for="trackingNumber" [style.font-family]="fontFamily">{{label}}</label>
Input Component.ts:
changeData() {
this.inputModelChange.emit(this.inputModel);
console.log(this.inputModel);
}
Here trackForm.reset() is not working. The only difference I see from Angular IO documentation is I use separate input component.
Not sure why it's not working.Any help?
It looks like the HTML element you want to reset is not inside the form you're calling.
Try to move it outside of the component and put it inside form or just refresh the model you're giving as an input when you want to refresh the form.
Hope it helps!
Related
When using a Bootstrap 4 modal with several forms separately displayed or hidden, the form field names are changed to random values.
From Google Chrome Devtools - Form Source:
<div>
<label for="YoB">Birth Year</label>
<input type="text" class="form-control" name="YoB" placeholder="YoB (approx)">
</div>
From Google Chrome Devtools - Elements:
<form id="AWForm2" class="form" role="form" autocomplete="off" style="display:none;">
<div>
<label for="YoB">Birth Year</label>
<input type="text" class="form-control" name="ryfdlthwhsn" placeholder="YoB (approx)">
</div>
<button class="btn btn-lg btn-block" type="button" onclick="process()"><i class="fa fa-search"></i> SEARCH NAMES</button>
function process() {
var saveDat = $("#AWForm2").serialize();
}
When entering 1985 into the form input element and clicking the button, the result is:
"ryfdlthwhsn=1985"
It appears that the DOM has changed with the input name being altered.
Can anyone explain what is happening and how I can programatically obtain the value of the input with name 'YoB'.
Note that the DOM is visible in the modal when the button is clicked.
Here I have one input field that I want to make mandatory url input field and I done this code.when I put url in input field or put any other text only input field in both case it saves input field and save in database. so, how to make mandatory url type input field in angular 6.
<form method="post" enctype="multipart/form-data">
<mat-form-field>
<input matInput type="url" pattern="https?://.+" placeholder="Large Icon" name="largeicon" #largeicon="ngModel"
[(ngModel)]="notificationObj.largeicon" required>
</mat-form-field>
<div *ngIf="largeicon.errors && (largeicon.dirty || largeicon.touched)" class="alert alert-danger">
<div [hidden]="!largeicon.errors.required">URL is required!</div>
<div [hidden]="!largeicon.errors.pattern">Must be a valid URL!</div>
</div>
<button mat-raised-button (click)="sendNotification()">SEND NOTIFICATION</button>
</form>
On Button click "sendNotification()" you are not checking the validation.
There are many ways to block the method call on validation. Find below sample code.
<button mat-raised-button [disabled]="largeicon.errors && (largeicon.errors.required || largeicon.errors.pattern)" (click)="sendNotification()">SEND NOTIFICATION</button>
Above code will disable button when validation failed.
your pattern should be
pattern="/^(http[s]?:\/\/){0,1}(www\.){0,1}[a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,5}[\.]{0,1}/"
or else on form submit function to check the regex value if matched then true else false
this fiddle will help you to understand better
You have done some mandatory things wrong to work with ngForm in the way as it is designed.
Please take a look at this guide: https://www.concretepage.com/angular-2/angular-2-ngform-with-ngmodel-directive-example
These are the major keys:
Use ngForm at the form tag
use ngSubmit instead of an (click) button, because that bypasses the form
try to add disabled in your form submit button and your already using the required in input field so,it will work now
<form method="post" enctype="multipart/form-data" #ngForm="formName">
<mat-form-field>
<input matInput type="url" pattern="https?://.+" placeholder="Large Icon" name="largeicon" #largeicon="ngModel"
[(ngModel)]="notificationObj.largeicon" required>
</mat-form-field>
<div *ngIf="largeicon.errors && (largeicon.dirty || largeicon.touched)" class="alert alert-danger">
<div [hidden]="!largeicon.errors.required">URL is required!</div>
<div [hidden]="!largeicon.errors.pattern">Must be a valid URL!</div>
</div>
<button mat-raised-button (click)="sendNotification()" [disabled]="!formName.form.valid">SEND NOTIFICATION</button>
</form>
for more details look here in angular docs
I have worked on AngularJs and now working on Angular2. Whenever I searched for form validation in angular I always found the submit button like below:
In AnglarJs
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
In Angular2
<button type="submit" class="btn btn-default"
[disabled]="!heroForm.form.valid">Submit</button>
But I wanted the submit button should be enable and whenver user click on that we prompt the error below the text fields. There is no exact solution mentioned for this purpose.
I found some of that some of the users directly clicks on submit button and they wanted to fill only required fileds.
This is my observation only may be some of you also experienced the same while development.
For AngularJs 1 I am using custom-submit directive from here
https://gist.github.com/maikeldaloo/5133963
So please suggest me any solution to provide custom-submit in angular2 also.
---- Sample Login Form (Angular2) ---
<form class="ui large form" (ngSubmit)="onUserLogin(loginForm.form.valid)" #loginForm="ngForm" method="post" novalidate>
<sm-loader [complete]="!formSubmited" class="inverted" text="Loading..."></sm-loader>
<div class="field">
<input type="email" name="email" placeholder="Email" [(ngModel)]="login.email" #email="ngModel" required />
<div [hidden]="email.valid || email.pristine" class="error text-left">
Email is required
</div>
</div>
<div class="field">
<input type="password" name="password" placeholder="Password" [(ngModel)]="login.password" #password="ngModel" required />
<div [hidden]="password.valid || password.pristine" class="error text-left">
Password is required
</div>
</div>
<button class="fluid yellow large ui button" type="submit">Login</button>
</form>
Please check what custom-submit directive are doing. Please give me answers the based on that. I know I can check the form valid status on controller level, but why this way I can say only form is not valid, I can not say which field is empty (we can also check this which field is valid, but don't know how to enable the error divs from controllers)
Please refer this...
https://gist.github.com/maikeldaloo/5133963
Thanks,
Just set a state and show/hide the errors depending on the state:
onSubmit() {
if(hasErrors()) {
this.hasErrors = true;
return false; // preventDefault
}
this.postData(); // process submit event
}
<div *ngIf="hasError">
... error info here
</div>
This way we actually validate whether you have entered the correct values or not. If any of the value fails then submit button gets disabled otherwise enabled.
For ex: E-mail : If email id doesn't have # and ., then it will be considered as dirty, which wouldn't lead to enable the submit button.
Edited:
To display the message you can do one thing:
<input type="submit" ng-click="done(heroForm.form.valid)" />
And in controller you can do this way.
$scope.done = function(valid){
if(valid) {
// Form content is valid, process it
} else {
// show error and do nothing.
}
}
jsfiddle demo: https://jsfiddle.net/zpufky7u/1/
I have many forms on the site, which was working fine, but just suddenly angular is binding all the forms with class="ng-pristine ng-valid"
Is this a setting or what can cause angular to auto-bind forms?
I'm using angular version: angular#1.4.7
Following is my form, as you can see there is no model inside form
<form name="app_bundle_notification_type" method="post">
<div class="row">
<div class="col-sm-8">
<div class="form-group">
<div class="checkbox">
<label class="required">
<input type="checkbox" id="app_bundle_notification_type_isNewsletter" name="app_bundle_notification_type[isNewsletter]" required="required" value="1" checked="checked">
Yes, I would like to receive email newsletter for new deals, coupons and news.
</label>
</div>
</div>
</div>
</div>
<div class="row m-y-1">
<div class="col-sm-12">
<button type="submit" class="btn btn-success">Save</button>
</div>
</div>
<input type="hidden" id="app_bundle_notification_type__token" name="app_bundle_notification_type[_token]" class="form-control" value="b-_qAF6LHFy_GtPlsFG3iguhVXfGsj38TXm22Ke8j0k">
</form>
Angular app.js
define(['angular'], function() {
var app = angular.module("myApp", []);
app.init = function () {
angular.bootstrap(document, [app.name]);
};
return app;
});
So far I found the issue, if you do angular.bootstrap(document, [app.name]); then it is binding the form. it was not causing this issue before.
Presuming you are using a form tag around your form, Angular automatically adds those classes to each ng-model inside your form.
This allows you much more control over the elements inside your form to perform any validation or logic you want your form to capture or enforce before submitting.
Much of it is listed in the docs here
https://docs.angularjs.org/api/ng/directive/form
For this reason, Angular prevents the default action (form submission
to the server) unless the <form> element has an action attribute
specified.
New version accepts empty action="", check release version at https://github.com/angular/angular.js/pull/3776
Different 'ng-model name' in ng repeat - Possible?
<div ng-repeat="todo in todos">
<input type="text" ng-model="tag">
<button type="submit"ng-click="addTodo(todo._id)">Add</button>
</div>
In this case, there are some repeat todo item (based on todos json data) will show on frontend
My Problem: What i type on any input field , all input field showing same data
I need different ng-model name on each input field , I guess like this ng-model="tag($index)"
You could place the newly created model inside tag array by its $index, while declaring model inside the tag you should use array notation [] instead of ()
ng-model="tag($index)"
should be
ng-model="tag[$index]"
Markup
<div ng-repeat="todo in todos">
<input type="text" ng-model="tag[$index]">
<button type="submit"ng-click="addTodo(todo._id)">Add</button>
</div>
It is possible like below
<div ng-repeat="todo in todos">
<input type="text" ng-model="tag[todo]"> <--todo.key-->
<button type="submit"ng-click="addTodo(todo._id)">Add</button>
</div>
You can do it like this:
<input type="text" ng-model="todo.tag">