I have 2 strange problems. I have a large form with lots of input fields. That works fine. I want to add a slide toggle at the bottom which changes a variable that will affect styles on the whole form.
My first problem is that the variable will not display until the slide toggle is clicked.
HTML
<mat-slide-toggle [(ngModel)]="ifPrint" name="ifPrint" id="ifPrint" ></mat-slide-toggle>
<div>
{{ifPrint}}
</div>
COMPONENT
export class PrintReviewDetailsComponent implements OnInit {
ifPrint = true;
}
the ifPrint variable is blank on page load
The second problem is
when the slide toggle is clicked the div containing the variable shows as true but when I click the toggle to the off position the ifPrint variable stays as true and does not change.
I have created a blitz and it is working fine there with the same code so I am unsure as why I am having these issues on my page.
The console says:
Error: No value accessor for form control with name: 'ifPrint'
EDIT: I updated the stackblitz to include the html of the form and now it is not working.
Your updated stackblitz couldn't recreate the issue which you shared... But from your question, the following 2 issues are addressed for a form and styling is also done:
the toggle value was not displayed by-default until the toggle was clicked
the toggle value didn't change when you toggled it
the style is now being updated based on the toggle value
relevant TS:
model:any;
constructor(){
this.model = {name: '' , age: null, ifPrint: false};
}
relevant HTML:
<form (ngSubmit)="formSubmit()" #demoForm="ngForm" >
<div [ngClass]="model.ifPrint === true ? 'trueClass' : 'falseClass'">
<input type="text" placeholder="Enter Name" #name="ngModel" [(ngModel)]="model.name" name="name" />
<br/>
<input type="number" placeholder="Enter Age" #age="ngModel" [(ngModel)]="model.age" name="age" /> <br/>
<mat-slide-toggle #ifPrint #age="ngModel" [(ngModel)]="model.ifPrint" name="ifPrint"></mat-slide-toggle> {{model.ifPrint}} <br/>
</div>
<button type="submit"> Submit </button>
</form>
check a minimal, working demo here for what you're trying... hope it helps...
I removed everything in your template except the mat-slide-toggle and it works as expected.
I believe the issue is because your html template is referencing methods or properties that your component does not have, or trying to access a property of null or undefined somewhere is causing the issue.
Check your console for the errors and if you fix those up, the slide toggle should work as expected.
Related
I have a button at the end of a form in Angular.
<form>
<!-- form inputs and stuff -->
<!-- hovering on button does not work with disabled -->
<button (mouseover)="findInvalidFieldsAndPutInArray()" [disabled]="myForm.form.invalid" data-toggle="tooltip" data-placement="top" title="Tooltip that shows Invalid fields: {{ invalidFieldsArray.join(', ')}}">Submit</button>
</form>
My current work around is to just bind a CSS class instead of the disabled property in the button so that hovering over via (mouseover) allows the tooltip and function to fire.
.cant-click {
pointer-events: none;
touch-action: none;
}
So my question is, is there more to the disabled property that I should know about before removing it in the buttons of my form. Will browsers/screen-readers/crawlers be affected in any negative/misleading way? Or can I just remove it and use the fix listed above?
ref: this jsfiddle
The html is:
<script id='radio' type='text/ractive'>
<div>
<input type='radio' name='{{status}}' value='true' />
<input type='radio' name='{{status}}' value='false' />
{{status}}
</div>
</script>
<div id='container' />
and the javascript is:
Item = Ractive.extend({
template : '#radio'
})
new Ractive({
el : '#container',
template : "{{#items:i}}<item status='{{status}}' />{{/items}}",
components : { item : Item },
data:{items :[{status : 'false'},{status : 'true'}]}
})
So there are two items each with a pair of radio buttons to set status to true or false.
Problem is that the 'name' attribute is the same for both items (i.e. in all four radio buttons). So the radio buttons don't behave as two pairs (one per item) but they behave instead as a group of four.
How can this be written such that each item has its own pair of true/false radio buttons?
I found the answer in the Ractive github issues.
As noted in the issue comment, scoping can be achieved by wrapping the radio buttons inside a element. This will not work when adding the form element creates nested forms, but it will work in my case.
I'm trying to add a button on the accordion heading. but when I click on the button, the accordion group collapse or open. but i dont want to trigger the accordion click when I click on the button.
If i put the button tag inside accordion-heading, it will put that into accordion-toggle class. so it wont trigger the button click. not sure if there is an easy way to change it.
http://plnkr.co/edit/eXE7JjQTMxn4dOpD7uKc?p=preview
Anyone can help?
Thanks
Add $event.stopPropagation(); in the ng-click.
http://plnkr.co/edit/eXE7JjQTMxn4dOpD7uKc?p=preview
The check marked solution didn't work for me, until I added $event.preventDefault() before $event.stopPropagation(). Maybe I got different results because I'm dealing with a check box or a newer version of Angular?
<uib-accordion-heading>
{{ thisGroup.stringThatShouldOpenAndCloseTheHeader }}
<!-- my checkbox changes -->
<div class="material-switch pull-right">
<input type="checkbox" id="{{ thisGroup._id }}" name="{{ thisGroup._id }}" ng-checked="thisGroup.active" />
<label for="{{ thisGroup.template._id }}" ng-click="$event.preventDefault(); $event.stopPropagation(); $ctrl.checkOrUnCheck(arg)"></label>
</div>
</uib-accordion-heading>
I needed BOTH, though. If I removed either, any clicking on the checkbox would open or close the accordion
or you can create a directive in your button tag for further usage :
.directive('yourDirective',function(){
return{
restrict:'A',
link : function(scope,ele,attr){
ele.bind("click",function(event){
alert('I will not toggle accordion');
event.preventDefault();
event.stopPropagation();
})
}
}
})
HTML
<button your-directive> Click Me <button>
Was a bit unsure how else to word this, JavaScript is the main thing I NEED to learn but after putting hours and hours in i still can't write javascript code off the top of my head. I understand the syntax of just about everything but when it comes to integrating it with css or html I am clueless!
Heres the code:
HTML:
<div id="mydiv">
<input type="text" name="colorpicker">
<input type="submit" value="Submit">
</div>
JavaScript:
document.getElementById("mydiv").style.backgroundColor="colorpicker.Submit";
bare in mind i've had little experience with forms and inputs in html too.
Any reply would be much appriciated! Thanks!
The value for style.backgroundColor should be a string representing a color value used in CSS, which can be one of:
Color name such as red, green, pink, ...
Color hex code such as #ff0000 (or #f00), #00ff00, #ff00ff ...
rgb() or rgba() function such as rgb(255,0,0), rgb(0,255,0), ...
You also have to set up the click event handler for the button submit. Here are details:
HTML:
<div id="mydiv">
<input type="text" name="colorpicker"/>
<input type="submit" value="Submit"/>
</div>
JS:
var div = document.getElementById('mydiv');
div.children[1].onclick = function(){
div.style.backgroundColor = div.children[0].value;
};
Note that you can assign an id for each input field to get access to it in JS code, in the above code I use the children collection to access to them instead. The first input field is the first child of div, the second input field is the second child of div.
Demo
Also note that, since HTML5 (which has been supported by all the major browsers) you can use the color input field which can popup a real color picker dialog for the user to select and then you just need to handle the event onchange to get the selected color (via the value property) like this:
HTML:
<div id="mydiv">
<input type="color" name='colorpicker'/>
</div>
JS:
var div = document.getElementById('mydiv');
div.children[0].onchange = function(){
div.style.backgroundColor = div.children[0].value;
};
Updated Demo.
Use the form tag onsubmit method to call your JavaScript function.
I have a partial View which contains a TextArea.
When i Render this parital view in my main view page the Text Area is coming disabled (but it not graying out) and not allowing any entry to be typed there.
//---Here are the code segement from my partial view---
<div id="AddComment" style="display:none">
<fieldset>
<legend>Add Comment</legend>
<p><label> Comment for:</label>- <select id="Station"></select></p>
**<%=Html.TextArea("UserComment", new { rows = 5, cols = 65})%>**** (this text area is the problem)
<p><input type="button" id="addComment" onclick="SaveComment()" value="Save" /></p>
</fieldset>
</div>
//-----end of code segment -----------------------
Please help
Thanks in advance.
I got the probem resolved. its was not the fault of the partial view Rendering.it was basically the script written on the main page to block the backspace keypress.
//--------------------below line of code prevents the browser to raise a backspace key press outside the editor---// //document.attachEvent('onkeydown', function(evt) { evt.returnValue = false; }); //-----------------------------------------------------------------------------------//...
once i removed this line thing started working. thanks you all for helping me