In my Angular component I have this form that has one text input and two buttons.
<form #myForm="ngForm">
<input type="text">
<input type="reset">
<button type="button" (click)="myForm.reset();">Reset</button>
</form>
If I click the first button text is cleaned. If I click the second one nothing happens. How can reset form with Angular?
Browser's console doesn't show any irregularities. FormsModule is imported to my NgModule.
#NgModule({
imports: [
BrowserModule,
RouterModule.forRoot(appRoutes, {useHash: true}),
HttpClientModule,
FormsModule,
Maybe this will be helpful for someone. I've found that adding ngModel and name makes it work.
<form #f="ngForm">
<input name="item" ngModel>
<button type="button" (click)="f.reset();">Reset</button>
</form>
It's time to learn in detail about Angular forms. This tutorial seems to be a good one https://angular.io/guide/forms
Related
I need CSS code to restrict submit button if fields are empty.Daily we are receiving 3-5 blank inquiries through our WordPress landing page submit button.
Where to put these CSS codes if any.
Thanks
You really should do this with a script, because doing something like this by CSS is very sensitive to any future changes to your form structure.
It can be done with only CSS, using the :placeholder-shown selector.
For this you'll need to add a placeholder to all text inputs.
/* As long as one of the selectors is matched, the button won't show. */
form input:placeholder-shown ~ button,
form textarea:placeholder-shown ~ button {
display: none;
}
<form>
first name: <input type="text" name="firstname" placeholder="Enter first name"><br>
Last name: <input type="text" name="lastname" placeholder="Enter last name"><br>
Text area<br>
<textarea name="textarea" placeholder="Enter some text..."></textarea>
<br>
<button type="submit">Submit</button>
</form>
This will work, but for any change in the form you'll need to make sure it doesn't break.
I personally won't use this :)
I have an angular 7 reactive form, input field in this form is to let user see and modify time and then using Save() save it back to our db, the problem is that user can enter any none sense numbers in this field which dose not make sense in terms of Time.(like hours should be 1-24, Minutes 1-60)
My question is how can I validate what user entered into time field and if its valid then let Save btn be active?
Note: Based on my testing even though its none sense time entry but while trying to save its not saving to db and its probably sql not letting that happen.
I googled but i could not find anything, also angular has only email Validators which u can put while defining form.
this is my form defination
timeForm: FormGroup = new FormGroup({
Id: new FormControl(''),
Time: new FormControl(''),
});
and this is my HTML side
<form style="background-color: aliceblue;" [formGroup]="service.timeForm">
<mat-grid-list cols="1" rowHeight="120px">
<mat-grid-tile>
<div class="form-controles-container">
<input type="hidden" formControlName="Id" />
<mat-form-field>
<input formControlName="Time" matInput placeholder="Time" />
</mat-form-field>
<div class="button-row">
<button mat-raised-button color="primary" type="submit" (click)="Save()">Save</button>
<button mat-raised-button color="warn" (click)="Cancel()">Cancel</button>
</div>
</div>
</mat-grid-tile>
</mat-grid-list>
</form>
I need some sort of validation when user punch in any input which dose not make sense in Time my Save btn should not be activated.
I appreciate your help and guideline.
You can use the HTML type="time" or if you want more you can simply use a library like: JsDaddy/ngx-mask found on Github. Use it like this:
HTML with MatInput:
<input formControlName="Time" matInput placeholder="Time" type="time" />
With ngx-mas:
<input formControlName="Time" matInput placeholder="Time" mask="Hh:m0" />
Adding type="time" in all input time type use cases always help.
About a week ago i posted a question but couldn't get it answer because i didn't know how to use jsfiddle or codepen but i figured it out.
my problem is that the button doesn't work now if you click around it it will display the file search box this is the sample:
https://codepen.io/anon/pen/bWaYzJ
<label> Uploads
<label for="exampleFileUpload" class="button">Upload File</label>
<input type="file" id="exampleFileUpload" class="show-for-sr">
</label>
now if i detached the plugin from element then button works again.
change your outer label to div seems to solve your problem like this codepen
<div> Uploads
<label for="exampleFileUpload" class="button">Upload File</label>
<input type="file" id="exampleFileUpload" class="show-for-sr">
</div>
<label for="exampleFileUpload" class="button">Upload File</label>
<input type="file" id="exampleFileUpload" class="show-for-sr">
And make your javascript:
$(document).ready(function(){
$('#exampleFileUpload').onClick({
MultiFile();
});
});
First, remove the reference to the MultiFile source file - that's what causes the "MultiFile is not a function" error. You will need to include the MultiFile directly in the source for the codepen (as you already have).
Second, the label needs to wrap the input, and it cannot use the for attribute (since that relies on the name attribute for the target, which you have not set):
<div> Uploads
<label class="button">Upload File
<input type="file" id="exampleFileUpload" class="show-for-sr" multiple>
</label>
</div>
To hide (but retain the functionality) the ugly default input type file button for file dialog I used the following mechanism:
HTML:
<label for="file-input">
<i class="fa fa-edit"></i> <!-- acts as file input on click-->
</label>
<input type="file" id="file-input" />
CSS:
#file-input {
display: none; //hide the file input
}
This is working expectedly: I click on the font awesome edit icon and the file dialog pops up.
However, when I use a button it stops working. I get no file dialog on clicking the button:
<label for="file-input">
<button type="button">Upload file</button> <!-- not working-->
</label>
<input type="file" id="file-input" />
The Label represents a "caption" for an item in a user interface.
The reason why your button isn't working is because a button isn't considered a valid "caption" for a "control" element because it is a "control" element.
(see: https://developer.mozilla.org/nl/docs/Web/HTML/Element/label)
If you use an image or a piece of text inside the label it will work, because that will be considered a caption (this is why your first attempt worked). If you want to create a custom button you can use some text or an image tag otherwise you'll need some javascript.
Edit: maybe this page can be of help: http://webmuch.com/how-to-customize-a-file-upload-button-using-css3-html5-and-javascript/
The javascript they use shows the user what file (s)he has selected
Just change the jQuery code and HTML tag will be as it is.
<label for="file-input">
<button class="upload_file" type="button">Upload file</button> <!-- not working-->
</label>
<input type="file" id="file-input" />
Jquery Code:
jquery("[for=file-input] .upload_file").on("click", function(){
jQuery("#file-input").trigger("click");
})
So I've been running into this issue where I can't seem to get values from my templates to my view objects.
For instance, take this signin form:
App.AuthSignInView = Ember.View.extend
templateName: 'auth/sign_in'
email: null
password: null
submit: (event, view) ->
event.preventDefault()
App.Auth.signIn
data:
email: #get 'email'
password: #get 'password'
And this template:
<form>
<div class="control-group">
<label class="control-label" for="email">Email</label>
<div class="controls">
{{view Ember.TextField valueBinding="email"}}
</div>
<div class="controls">
{{view Ember.TextField type="password" valueBinding="password"}}
</div>
</div>
<button class="btn btn-inverse">Sign In</button>
</form>
When the view attempts to access the email and password properties on submit, they are still null. I'm sure I'm doing something simple wrong here, but I'm not sure what.
Although it's not a good practice to have your view's holding state for your app, everything logic related should be done in controllers, which is the default lookup place for values defined in your templates. But if you really need your values to be on your view you should prefix you value bindings with view.email and view.password in your templates to have it use the values on your view.
See here for a working jsbin using the view approach.
And here an example jsbin using the controller which is the recommended way.
Hope it helps.