I'm trying to show and hide a form field using Angular's *ngIf but, when I do, the entire form doesn't render no matter the value I give the *ngIf and no errors are thrown. Clearly the *ngIf isn't the way to go. Is there a more DevExtreme way to do this? I see there is a visible in the documentation but I don't just want to hide it.
HTML
<dx-form id="companyDetailsForm" [(formData)]="company" [showColonAfterLabel]="false">
<dxi-item dataField="Name">
<dxi-validation-rule type="required" message="Name is required"></dxi-validation-rule>
</dxi-item>
<dxi-item *ngIf="hasParent" dataField="Parent" caption="Parent">
<dxo-label text="Parent"></dxo-label>
</dxi-item>
</dx-form>
Use visible property instead, *ngIf does not work in the DX Form.
<dxi-item [visible]="hasParent"
Related
I need to disable some fields based on my angular form. I am trying to disable the DOM elements in component class because many html tags are customized and so disabled attribute cannot be used there. The way I am doing this is using #ViewChild/#ViewChildren in my component and disabling in ngAfterViewInit(). I am not able to disable the elements which are inside ngIf in html. Below is the code:
Html:
<div *ngIf="displayAdvOpt">
<div class="card-title">Rules</div>
<abc-select-field
#rule
width="100%"
label=" "
formControlName="_rules"
[options]="rules"
></abc-select-field>
<div>
Component class:
#ViewChildren('rule') ruleSelect;
When logging ruleSelect in component class, it shows that is a QueryList and not a FormControl, as is the case for the elements not inside ngIf. Due to this, I am not able to do ruleSelect.control.disable() to make it disabled in html. I am doing these in ngAfterViewInit().
Please let me know how can I disable a QueryLst or if there is any other way.
#Abhinash, you can not acces to any element if is not in the screen. As you has the element under a *ngIf you need condition becomes true and "after Angular repaint", enable/disable... so, in general
this.condition=true;
setTimeout(()=>{
this.ruleSelect.....
})
But your abc-select-field, has a FormControl in any way and the FormControl exist even the abc-select-field is not in screen, so if you makes that the elements are disabled depending if the control is disabled
In order to disable the select field, you don't need to know neither that 'distinction' (QueryList/Control) nor a 'local reference' (#rule) :
Simply, in the code you want to disable, you just need to do this:
this.form.get('_rules').disable();
// or this.form.constrols['_rules'].disable();
Similarly, when you want to re-enable it you can use:
this.form.get('_rules').enable();
Below is the workaround I tried.
<div *ngIf="displayAdvOpt">
<div class="card-title">Rules</div>
<abc-select-field
#rule
width="100%"
label=" "
formControlName="_rules"
[options]="rules"
on-mouseover="isDisabled()"
></abc-select-field>
<div>
In component class:
#ViewChild('rule') ruleSelect;
isDisabled() {
if (this.showChanges){
this.ruleSelect.control.disable();
}
I see that in ngAfterViewInit(), ruleSelect is a QueryList but in isDisabled() the method called after on-mousehover, it is coming as AbcSelectFieldComponent and so I can call .control.disable() on it. The only reason I can think of is this- https://stackoverflow.com/a/55610325/4464806
Anymore suggestions are welcome!!
Hi I am working on a Angular4 application and for UI I am using Primeng.
I have a multi-select element which behaves pretty much the same as it does over here https://www.primefaces.org/primeng/#/multiselect
The only thing I want different is on the drop-down, when "X" (close) button is clicked, I want it to clear all the selection instead of closing the drop-down itself.
Is there any way to achieve that in primeng ?
Help is appreciated !
You can manually trigger the checkbox in the left by jquery.
declare var jquery:any;
declare var $ :any;
$('.ui-chkbox-box.ui-widget.ui-corner-all.ui-state-default').trigger('click')
or you make the value of the p-multiselect equal to [].
Ex.
//html
<p-multiSelect #multiselect>
<button type="button" (click)="functionToClear(multiselect)"</button>
</p-multiselect>
//ts
functionToClear(multiselect): void {
multiselect.value = [];
}
It isn't possible, but you can clear all the selection by clicking the checkbox in the left corner twice.
While it isn't a supported functionality of the Multiselect PrimeNg component, if you really want it to do that, you would have to manually edit the component, multiselect.js, and modify the close(event) function to do what you want.
you can use formGroup and try to clear value following way:
html:
<ng-multiselect-dropdown [(ngModel)]="data"
[data]="fetchedData" [settings]="customeSettings"
formControlName="myControl">
</ng-multiselect-dropdown>
.ts:
this.form_name.controls.myControl.setValue("");
normally the multi-select input in primeng is binded to a property that holds the selected members, usually an array.
you can use a reset button for example that when clicked, it will empty that propery/array and this will clear all the selected check boxes of the multi-select.
Since PrimeNg version 13, you can use [showClear]="true" property to display an 'X' icon next to the control value.
I have a input field which I set focus to when my view loads in the following way:
ngAfterViewInit() {
this.focusInput.nativeElement.focus();
}
this works fine from within the ngAfterViewInit() function but when I try to do it in another part of my view when a button is clicked I get an exception saying that focusInput is undefined. After reading up a bit it seems like ngIf could be the cause of this as the part of the view that contains the input field #focusInput gets shown or hidden using ngIf. Is there any way I can check using ngOnChanges() or anything else whether the #focusInput input field is currently shown and if it is set focus to it?
It happens when you have ngIf or ngFor directives inside your template and your input can not be linked to focusInput property you added inside your class. Instead use this code:
<input type="text" #myInput />
{{ myInput.focus() }}
Just add {{ myInput.focus() }} right after input inside template
The simplest solution turned out to be writing a custom focus attribute directive. This helped a lot:
How to move focus on form elements the Angular way
I know its very late to answer your question. If you want focus after any click or view change so for this you need to call change detector.
You can call change detection after your view change or a click by calling detectchanges().
`constructor(private detRef:ChangeDetectorRef) {}
#ViewChild('name_input') input: ElementRef;
private buttonClick(): void {
this.detRef.detectChanges();
this.input.nativeElement.focus();
}`
Hope this will helpful.
I have a span with an ng-click="..." attribute. The ng-click slightly modifies the span's CSS within the DOM so that it is more button-like. Within my application I wish to toggle whether or not that span is clickable or not. I can make the ng-click not do anything easy enough but what I would prefer is to just remove/disable the attribute altogether. This is to avoid all "buttonizing" that the ng-click does to the element. It would also be nice if the attribute were re-enabled if the clickable variable becomes true again.
I would like a solution that avoids using $scope.$watches because my application is pretty large and watches are slow.
Thanks!
I think you can have two spans with and without ng-click attribute and based on that clickable variable you control those two spans with ng-if or ng-show
Simple solution suggested by to Achu!
Just use two spans rather than toggle the attribute on a single span.
<span ng-if="clickable" ng-click="...">Click me!</span>
<span ng-if="!clickable">Cant click me!</span>
If I were in such a situation, I would not try to enable or disable ng-click attribute. Rather, I would use some flag variable with the $scope to see if click function should perform its functionality or not like in your controller you have a method like
$scope.spanClick = function(){
if(!$scope.shouldClick){
return;//simply do nothing
}
//Do button click logic
}
I am using ui-grid directive to display results,
In column header i am using headerCellTemplate to apply ng-click directive, I am calling simple sort_sq() , which should invoke a alert box.
But the alert box is not invoking.
it means ng-click is not working.
could Anyone suggest how make it work.