Is there any way to have a slider and next to it an editable field with it's current value?
I am using MDL and not polymer, because its light weight and should be distributed with locally run software.
This is a way:
<input class="mdl-slider mdl-js-slider" type="range"
min="0" max="100" value="50" tabindex="0" id = "slide_01">
<form action="#">
<div class="mdl-textfield mdl-js-textfield" id="text_01">
<input class="mdl-textfield__input" type="text" >
</div>
</form>
and
$('#slide_01').on('input',function(){
$("#text_01").get(0).MaterialTextfield.change(this.value);
});
$('#inp_text_01').keyup(function() {
$("#slide_01").get(0).MaterialSlider.change($('#inp_text_01').val());
});
-- updated the code and the fiddle to make it update the slider when the value is entered in the field --
https://jsfiddle.net/n6xy84ov/
I think there should be a better way, referring to my question here:Fetching the value of a mdl-textfield
Related
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.
I'm using a paid template, and I'm trying to apply it to the project (it's working, but not good to the eye)
This is the code
<input type="checkbox" name="checkbox_demo_mars" id="checkbox_demo_4" data-md-icheck checked />
<label for="checkbox_demo_4" class="inline-label">Outside vue</label>
<div id="vm_settings">
<input type="checkbox" name="checkbox_demo_mars" id="checkbox_demo_4" data-md-icheck checked />
<label for="checkbox_demo_4" class="inline-label">Inside VM</label>
<template v-if="1">
<input type="checkbox" name="checkbox_demo_mars" id="checkbox_demo_4" data-md-icheck checked />
<label for="checkbox_demo_4" class="inline-label">Inside if</label>
</template>
<template v-for="setting in settings">
<div>
<input type="checkbox" name="checkbox_demo_mars" id="checkbox_demo_4" data-md-icheck checked />
<label for="checkbox_demo_4" class="inline-label">Inside for</label>
</div>
</template>
<button v-on:click="saveSettings">Save</button>
</div>
This is how it is outputed to the browser checkbox not having the styles it should
Any way to fix it?
Customized checkboxes are not merely styled with CSS, they are proxied: the real checkbox widget is hidden and other elements are inserted and styled in their place.
As such, there must be some call that examines the HTML and does the widget replacement. You need that to happen to each element that gets inserted. You do that by writing a wrapper component. Typically, in its mounted hook, you would apply the initialization of the widget to this.$el (or something inside it).
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>
I'm building a website to let users design their own mobile app. One side of the website has a form that the user fills out, and the other side has a live preview of the app based off of the form data. This is how it is set up:
Controller:
$scope.primaryColor = "#325490";
Form Input:
<!-- Primary Color -->
<div class="form-group">
<label for="primaryColor" class="col-sm-2 control-label">Primary:</label>
<div class="col-sm-10">
<input type="text" class="form-control" ng-model="$parent.primaryColor">
</div>
</div>
Live Preview:
<div class="mockView" ng-style="{'background-image':'url({{$parent.backgroundFile}})', 'background-color':'{{$parent.primaryColor}}'}">
I have to use $parent because I am using ng-include on my index page to include the form.htm and preview.htm files. I have tested the form and I know it is changing all of the scope variables that I have, but the previewer is not changing. Any help is appreciated!
Remove {{}} and '' and it should work, like this:
<div class="mockView" ng-style="{'background-image':'url({{$parent.backgroundFile}})', 'background-color': $parent.primaryColor }">
I have the following mdl-textfield:
<div class="mdl-textfield mdl-js-textfield" id="step_condition">
<textarea class="mdl-textfield__input" type="text" rows="25"> </textarea>
<label class="mdl-textfield__label" for="step_json">Step condition</label>
</div>
To set the value of the field I use:
$("#step_condition").get(0).MaterialTextfield.change('100');
My questions are:
is this the correct way of setting the value of the field?
is there a similar way to fetch the value of the field?
I know I can fetch the value directly from the textarea, but somehow it seems to make more sense to use the API.
You should add an id to the textarea itself, like:
<div class="mdl-textfield mdl-js-textfield" >
<textarea class="mdl-textfield__input" type="text" rows="25" id="step_json"></textarea>
<label class="mdl-textfield__label" for="step_json">Step condition</label>
</div>
Look at the example on the official specifications, there is no id at the div level. http://www.getmdl.io/components/index.html#textfields-section
To set up the value of the field you could do
$("#step_json").val("100");
However you will have to deal with the fact that the label is not removed automatically. This post should help: https://github.com/google/material-design-lite/issues/903