How to show/hide <div> when <mat-checkbox> is checked/unchecked? - javascript

I'd like to show/hide a <div> when a <mat-checkbox> is checked/unchecked.
My checkbox is the following code:
<mat-checkbox formControlName="rushDelivery">
Rush Delivery
</mat-checkbox>
And the <div> I want to show/hide will be below the checkbox, further down on the page.
I have used [(ngModel)] and *ngIf in the past, however from my understanding, the latest version of Angular does not support [(ngModel)] and *ngIf if formControlName is also used in the same element.
I cannot remove the formControlName since I use it to get the value of the checkbox upon the submission of the form. I also don't want to touch that portion of the code in case I break the form.
What would be the easiest alternative solution to show/hide the <div> when the checkbox is checked/unchecked?
Thanks.

In your HTML-
<mat-checkbox (click)='toggle()'>
Rush Delivery
</mat-checkbox>
<div [hidden]='isHidden'>
<p>This is a paragraph</p>
</div>
In your TS, initially define isHidden variable to false-
isHidden=false;
In your function-
toggle(){
this.isHidden=!this.isHidden;
}

you can access the value of a FormControl using get, so, if your formGroup is called, e.g. form, you only need
<div *ngIf="form.get('rushDelivery').value">
..If you can see this is because...
..the checkbox is checked..
</div>

Although [(ngModel)] won't work with formControlName, you can still show/hide the div in serval ways.
option 1: add *ngIf="form.rushDelivery" onto the div that you want to show/hide
option 2: add (change)="checked = change.checked" callback to mat-checkbox and add *ngIf="checked" onto the div

there are multiple ways for achieving the solution, to show/hide the div!
.html
<mat-checkbox formControlName="rushDelivery" (click)='showOrHide()'>
Rush Delivery
</mat-checkbox>
<div [class.hide]='isVisible'>
Some info ...
</div>
.ts
isVisible = true;
showOrHide(){
this.isVisible = !this.isVisible;
}
.css
.hide{
display: none;
}

Related

angular-ng-autocomplete touch event not work

I have a problem with the validation of the autocomplete with Angular 9 when it is empty only on touch but it does not work and touch is always false.
the module link that i used :
https://www.npmjs.com/package/angular-ng-autocomplete
here is my code :
<div class="ng-autocomplete">
<ng-autocomplete #autoComplete
[data]="countries"
[searchKeyword]="keyword"
placeHolder="Enter the Country Name"
(selected)='selectEvent($event)'
(inputChanged)='onChangeSearch($event)'
(inputFocused)='onFocused($event)'
historyIdentifier="countries"
[itemTemplate]="itemTemplate"
[formControl] = "country"
[notFoundTemplate]="notFoundTemplate">
</ng-autocomplete>
<ng-template #itemTemplate let-item>
<a [innerHTML]="item.name"></a>
</ng-template>
<ng-template #notFoundTemplate let-notFound>
<div [innerHTML]="notFound"></div>
</ng-template><br><br><br><br>
<span *ngIf="country.touched && !country.value"> select something </span>
</div>
I faced the same problem. The problem is formControlName is tagged on 'ng-autocomplete' instead on 'input' html tag as we generally use it.
I did a workaround using the (inputFocused) event from ng-autocomplete and markAsRead() from Reactive forms to mark the form control as readed after the user put the focus on the autocomplete input.
HTML code:
<ng-autocomplete
[data]="data"
[searchKeyword]="keyword"
(selected)='selectEvent($event)'
(inputChanged)='onChangeSearch($event)'
(inputFocused)='onFocused($event)'
[itemTemplate]="itemTemplate"
[notFoundTemplate]="notFoundTemplate">
</ng-autocomplete>
(inputFocused) will trigger markAsRead() method in ts, so there I will change the touched property of the form control.
Typescript code:
markAsRead() {
this.form.get('from_control_name').markAsTouched();
}
This is how I changed touched input property.
Hope it helps anybody :).
Docs: ng-autocomplete y reactive forms.

Question about checkbox and radio buttons

I'm using element-ui and I have no idea how to make it work. I have the following code:
<div v-for="(solution, s_index) in scope.row.arrayDefectiveActions"
:key="`${requirementTemplateTypeIndex}.${requirementExtendedItemIndex}.${s_index}`"
style="display: inline-block;" class="p-sm">
<el-checkbox v-model="solution.checkActionTaken"
:disabled="!scope.row.checkDefectiveItem"
#change="articleChanged(requirementExtendedItem)">
</el-checkbox>
</div>
My question is how can I transform this checkbox into radio buttons, because I tried to use the exact same code but changed only the checkbox and I can select all of them without unchecking the others
You must add :class="{'active':radio===item.id}" to the v-for iterator and use <el-radio v-model="radio" :label="item.id">.
Here you can find a working example.
Best regards,
Brhaka
Have a look to the documentation on how to use the proper component.
el-checkbox is for checkboxes
el-radio for radios
Documentation: https://element.eleme.cn/#/fr-FR/component/radio

Angular - Toggle Content

I am using Angular 4 and I am trying to toggle contenteditable="true" / contenteditable="false"
I've got this:
<h1 (dblclick)="edit($event)" contentEditable="true">Double-click Here to edit</h1>
or I could also have a checkbox if its easier to toggle edit mode?
<input type="checkbox" name="" value="" (onchange)="edit($event)">Toggle Edit mode
and on the .ts file:
edit(event) {
// code here needed
}
Create a one way binding from the contentEditable property to a field in your Component, then add an event binding for the click event on the header.
In your component, create a boolean:
private isEditable = false;
Then, in your html, toggle the value of this boolean with a click event, and bind the contentEditable property to this boolean as well:
<h1 (dblclick)="isEditable = !isEditable" [contentEditable]="isEditable">
You could also put the code of the (dblclick) binding inside a method on your component, if you'd rather have some method like toggleIsEditable(), with additional logic.
What you need is the following.
HTML
<h4 (dblclick)="contentEditable=true; toto.focus()"
*ngIf="!contentEditable">
{{myText}}
</h4>
<input #toto
autofocus
*ngIf="contentEditable"
[value]="myText"
(keyup.enter)="contentEditable=false; save(toto.value)"
(blur)="contentEditable=false; save(toto.value)"
type="text">
TypeScript
myText = "Double-click Here to edit";
With some css you can get to have one in place of the other.
Here is the plunker

Kendo UI template loading with hidden elements

I have a kendo ui template that is loaded in my program, but I need one of the elements to be hidden, so I can use a button to toggle them hidden or shown at any time. I want to use a basic jQuery toggle command, but the issue is getting the elements to be in the correct state initially. Can anyone help me initialize ResultsObjectPartial and ResultsObject has hidden and shown?
Here is my template:
<script type="text/x-kendo-template" id="template">
<div id="details-container">
<textarea id="ResultsObjectPartial">
#
var partialResults;
Calculation to return a partial result
#
#= partialResults #
</textarea>
<textarea id="ResultsObject">
#: ResultObject #
</textarea>
<button type="button" id="toggleResults">Full/Partial</button>
</div>
Here is my jQuery:
$(document).on("click", "#toggleResults", function (e) {
$("#ResultsObjectPartial").toggle();
$("#ResultsObject").toggle();
});
I believe it should be as simple as:
<textarea id="ResultsObjectPartial" style="display: none">
What toggle() does is change the CSS display property, in the simplest case setting it to 'none' if it isn't set to that, or removing 'none' if it is. So setting it as 'none' in your html should give you the initial state you are after.

Angularjs, checking if radio buttons in form have been selected

I'm starting with AngularJS, and I'm building a multi-step form where user has to fill different pages. When finished a page, he's allowed to press a next button and fill the following page.
For the first page, I've built in the HMTL a form (named pageOneForm), with different text input fields, marked as required, and in the relative controller I'm doing this watch:
$scope.$watch('pageOneForm.$valid', function(validity) {
ModelData.actualPageCompleted = validity;
})
And it works like a charme. My model (ModelData) is updated.
I was trying to apply the same logic to the following part of the app, the second page. Instead of input text, the user has to select two options from 2 different radio buttons groups.
So I built in the html a list of buttons via ng-repeat :
<div ng-Controller="PageTwo" ng-show='data.actualPage == 2'>
<form name="pageTwoForm">
<h3>General Information > Knowledge About </h3>
<div>
<b>User</b>
<div ng-repeat="option in userOptions">
<input type="radio" name="userGroups" ng-model="data.knowledgeAboutUser" ng-value="option.id" id="{{option.id}}" required>{{option.text}}
</div>
<div ng-repeat="option in targetGroupUserOptions">
<input type="radio" name = "targetUserGroup" ng-model="data.knowledgeAboutTargetGroup" ng-value="option.id" id="{{option.id}}" required>{{option.text}}
</div>
</div>
</form>
and I've implemented the same code as above in its controller:
$scope.$watch('pageTwoForm.$valid', function(validity) {
ModelData.actualPageCompleted = validity;
})
but apparently it doesn't work, and in my model actualPageCompleted is always true...
What am I doing wrong?
Thanks
I did my best to create a controller with some dummy data to get a fiddle working with your example code. Here is the fiddle You need to force the $digest cycle to update your form's validity state on ng-click for the radio buttons (see this SO post for more details), which is why the method
$scope.forceDigest = function(){
setTimeout(function(){ $rootScope.$$phase || $rootScope.$apply(); });
};
is necessary. Alternatively, you can get rid of the method call and uncomment the html code
<h3 ng-show="false">{{data.knowledgeAboutTargetGroup}}</h3>
<h3 ng-show="false">{{data.knowledgeAboutUser}}</h3>
in the fiddle to force the form object to update as well.
And I would make sure that ModelData.actualPageCompleted is not retaining its true value from when pageOneForm.$valid became true and it was set.
I hope that this helps!

Categories

Resources