I have a button with a (click) event that currently fires a method in an Angular component which works perfectly, but I also need to fire the same method if the user hits the enter key from the input box so the user has a choice.
Here' the HTML I'm using for the input and the button:
<div class="input-group input-group-sm mt-3">
<input autocomplete="off" list="autocompleteOff" type="text" class="form-control" placeholder="E.G. 'What is a beneficary?'" aria-label="Ask" [(ngModel)]="userQuestion" id="userQuestion" name="userQuestion" [ngStyle]="{'background-color': brand?.colours.secondary, 'color': brand?.colours.primary}">
<div class="input-group-append">
<button id="user-btn" class="btn btn-secondary" type="button" (click)="askQuestion()" [ngStyle]="{'background-color': brand?.colours.primary, 'color': brand?.colours.secondary}">Ask</button>
</div>
</div>
Can I do this form the HTML side or do I need to set up a listener for the enter key?
You can use keyup.enter :
<input (keyup.enter)="askQuestion()"/>
You may edit your button element type attribute to type="submit".
This is already answered in Fire a method when click an Enter key
<input ng-keyup="$event.keyCode == 13 ? MyFunc() : null" >
Related
I'm building a form consisted of button. I want to get value from a highlighted button being sent to a parameter when submit button is clicked, but the problem is I only found a way to sent value from a radio button. Is there any equivalent way to do this?
I know this is only applicable for radio button, so I'm searching an equivalent queryselector that will give exact action like code below but for button
document.querySelector('input[name=customButton]:checked').value
<button type="button" class="btn" id="customButton1" name="customButton" value="1">
<label for="customButton1">Excellent</label>
<button type="button" class="btn" id="customButton2" name="customButton" value="2">
<label for="customButton2">Not good</label>
You cannot convert a radio directly to a button like you did. The HTML is not valid
You can style a radio like a button or do this
document.getElementById("myForm").addEventListener("click",function(e) {
const tgt = e.target.closest("button")
if (tgt.matches(".customButton")) document.getElementById("customButton").value = tgt.value
})
<form id="myForm">
<input type="hidden" name="customButton" id="customButton" value="" />
<button type="button" class="btn customButton" value="1">Excellent</button>
<button type="button" class="btn customButton" value="2">Not good</button>
</form>
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.
I have this form:
<form method="post">
<input type="tel" name=phone_no required>
<input type="password" name=password required>
<button type="submit">Sign In</button>
</form>
How can I automatically submit this form when browser auto-fills these input fields in form ?
You can do this using Javascript :
(1) Get html elements with selector :
document.getElementsByName(..)
(2) Check if the elements contains any value.
element.value
(3) In that case, trigger an event which click on the submit button :
button.click();
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.
}
}