How to enable/visible mat-autocomplete only if condition gets true - javascript

UPDATED
Creating user input popup form, in one field trying to do autocomplete, with THIS solution.
I guess the auto-complete is working fairly fine, the issue is the options not coming below the input box.
Code:
<div>
<div class="modal-header">
</div>
<div class="modal-body">
<form novalidate [formGroup]="myform">
<div class="form-floating form-group">
<input type="text" class="form-control" id="fltName" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
<label for="fltName">Name</label>
<mat-autocomplete autoActiveFirstOption #emp="matAutocomplete" class="form-control">
<mat-option *ngFor="let option of filteredOptions | async" [value]="option">
{{option}}
</mat-option>
<mat-autocomplete>
</div>
Question:
1. The options box should display, only if there 2 or less matches?
2. return emp names options by inserting emp_id?
How can I setup option such as {name:xyz, emp_id:123, emp_no:333}, and if I text any value should give name as option like if I write 33 should bring option xyz.

Question 1: The options box should display, only if there 2 or less matches
For this you need to apply the ng-container (To avoid rendering the option box) directive and apply the length condition over there according to your requirement.
<mat-autocomplete #auto="matAutocomplete">
<ng-container *ngIf="filteredOptions && (filteredOptions | async)?.length <= 2">
<mat-option *ngFor="let option of filteredOptions | async" [value]="option" >
{{option.name}} //this is the value you always want to display
</mat-option>
</ng-container>
</mat-autocomplete>
Question 2: return emp names options by inserting emp_id?
The second part can be achieved by applying filter on the required fields, i.e.
private _filter(value: string): string[] {
if(value && value !== ""){
const filterValue = value.toLowerCase();
return this.options.filter(option => option.name.toLowerCase().includes(filterValue) || option.emp_no.toString().startsWith(filterValue));
} else {
return [];
}
}
apart from this you need to fix the pipe part as well, you have to pass the control value in RxJs startWith operator like,
this.filteredOptions = this.myControl.valueChanges
.pipe(
startWith(this.myControl.value),
map(value => this._filter(value))
);
Note: you can access the working solution here

Related

How to display additional data of a selected option in select tag

This is the requirement where the id and the device has to be displayed alongside the selected option. How to display this additional data using Angular material select.
Note: Not in the option but in selected input tag
<mat-select required formControlName="sensorId">
<mat-form-field class="w-100">
<mat-label>
<em class="fa fa-search f-20"></em>
</mat-label>
<input matInput #sensorFilter />
</mat-form-field>
<mat-option
*ngFor="let sensor of sensors | filter: sensorFilter.value"
[value]="sensor.name"
>
{{ sensor?.name | translate }}
</mat-option>
</mat-select>
This is the sensor object properties
public static fields: Array<string> = [
'id',
'object_id',
'unit_type',
'device',
'sensor_type',
'name'
];
1
If I understand your question correctly, you simply need to add the id and device id as an interpolation in the mat-option element. Something like this:
<mat-option *ngFor=" let widget of widgetsEnum | filter: widgetFilter.value" [value]="widget.id">
{{ device.id }} {{ widget.id }} {{ widget.name }}
</mat-option>
Since there is no 'device' or 'device id' shown in your code, I will assume that it is available in your controller and is called device. If not you will need to make it available in the controller and give it the appropriate name. I am also assuming that when you say 'id' you mean the widget id since there is no other id listed in your code.

mat-autocomplete the option value does not appear correctly in IOS device

When I select the first option in the dropdown, the option is not reflected in the field. When I select the second option then first option value appears and when selects third the second option value appears. Any suggestions as to what the problem is in my code?
This is happening only on iOS devices.Its working fine on Android and Desktop.
emailDomains = AvailableDomains.emailDomains;
export const AvailableDomains = {
emailDomains: [
"hotmail.com",
"gmail.com",
"yahoo.com",
"outlook.com"
]
}
<mat-form-field appearance="outline" class="textbox mat-form-field-invalid">
<span class="iconError icon-alert" aria-hidden="false" aria-label="Error"></span>
<mat-label>Email</mat-label>
<input matInput placeholder="Enter" formControlName="email" type="email" [matAutocomplete]="emailAutoComplete" #email>
<mat-autocomplete #emailAutoComplete="matAutocomplete" panelWidth="auto">
<mat-option *ngFor="let emailDomain of (email.value.endsWith('#') && email.value.split('#').length == 2 ? emailDomains : [])" [value]="email.value + emailDomain">#{{emailDomain}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
I have some auto-complete code that does work on IOS. I compared the two and the difference I see is that I am using (optionSelected) on the mat-autocomplete tag instead of (onSelectionChange) on the mat-option tag. Try it and see.
<mat-form-field appearance="outline" class="textbox mat-form-field-invalid">
<span class="iconError icon-alert" aria-hidden="false" aria-label="Error"></span>
<mat-label>Email</mat-label>
<input matInput placeholder="Enter" formControlName="email" type="email" [matAutocomplete]="emailAutoComplete" #email>
<mat-autocomplete #emailAutoComplete="matAutocomplete" panelWidth="auto" (optionSelected)="updateForm($event,emailDomain)">
<mat-option *ngFor="let emailDomain of (email.value.endsWith('#') && email.value.split('#').length == 2 ? emailDomains : [])" [value]="email.value + emailDomain">#{{emailDomain}}
</mat-option>
</mat-autocomplete>
</mat-form-field>

Angular how to make nested form array act independently

I am trying to solve the problem of having my field change on both form array fields when you change the field type.
As you can see in the image. When I select the left field first name the right field changes to a text field. But when a add a new field it generates a dropdown field to the right and changes the top one as well. How do I make these fields act independently?
I also think the problem is the ngTemplate function I am using to check to see if the field is a option or text field. maybe this is a global within the form I am using, if that makes sense?
Html
<div class="filter-wrapper">
<form [formGroup]="usersForm" (ngSubmit)="onSearch()">
<ng-container *ngFor="let userFormGroup of usersForm.controls.users.controls; let i = index">
<div [formGroup]="userFormGroup" class="filter-form">
<div class="search-wrapper">
<mat-form-field class="form-toggle input-half dialog-dropdown">
<mat-select formControlName="columnOptions">
<mat-option value="null">
-- none --
</mat-option>
<mat-option *ngFor="let formOption of displayedOptions" [value]="formOption.name" (click)="getOptionData(formOption.name)">
{{formOption.title}}
</mat-option>
</mat-select>
</mat-form-field>
<span class="match-txt">matches</span>
<mat-form-field class="input dialog-dropdown">
<ng-container *ngIf="selectedOpt.options?.length > 0; else inputField">
<mat-select formControlName="columnValues">
<mat-option value="null">
-- none --
</mat-option>
<mat-option *ngFor="let formOption of selectedOpt.options" [value]="formOption.display_long_value || formOption.description">
{{ formOption.display_long_value || formOption.description }}
</mat-option>
</mat-select>
</ng-container>
<ng-template #inputField>
<input matInput type="text" formControlName="columnValues">
</ng-template>
</mat-form-field>
</div>
<div class="action-btns">
<mat-icon (click)="addFormControl()">add_circle_outline</mat-icon>
<ng-container *ngIf="i !== 0">
<mat-icon (click)="removeFormControl(i)">remove_circle_outline</mat-icon>
</ng-container>
</div>
</div>
</ng-container>
</form>
</div>
Form builder
this.usersForm = this.fb.group({
users: this.fb.array([
this.fb.group({
columnOptions: ['', Validators.required],
columnValues: ['', Validators.required],
}),
])
})
https://stackblitz.com/edit/angular-l7stwq
The stackblitz wasn't working because the import was missing to initialize columnOption/columnValues, but I think you should reference the formgroups created by your array. I usually start by logging the formgroup.value every step of the way to make sure My ui matches my data model, But try this:
change
<div [formGroup]="userFormGroup" class="filter-form">
to
<div [formGroupName]="i" class="filter-form">
This should match with what your model would be showing for the formArray (since
the groups have index-based names, per them being 'arrays'.
Hopefully this gets you somewhere, If you could update the stackblitz to be able to run I'd do some trial and error to see where I get
Good luck/Happy Coding!

Angular - All Input values are changing on select changes in formarray

I'm working with angular material, but I have a problem in Angular 7 with a FormArray.
When I only have 1 item, it's working fine, but once I add another item dynamically, selects has correct value, but the input related has the same value which is wrong.
Example:
1) change select 1:
Value of select 1: Item1 (correct)
Value of input 1: Code1 (correct)
2) Add a new item, copying previous values:
Value of select 1: Item1 (correct)
Value of input 1: Code1 (correct)
Value of select 2: Item1 (correct)
Value of input 2: Code1 (correct)
3) Change select 2 to Item2:
Value of select 1: Item1 (correct)
Value of input 1: Code2 (incorrect)
Value of select 2: Item2 (correct)
Value of input 2: Code2 (correct)
The input 1 should have "Code1" as value, but all inputs changes its values to the last changed select.
Here is my code:
Template:
<div formArrayName="transporteArrayItems">
<div *ngFor="let item of transporteForms.controls; let i=index" [formGroupName]="i">
<div class="form-group row">
<div class="col-md-9 dropdown-input-inline">
<mat-form-field appearance="outline">
<mat-label>Condiciones de entrega</mat-label>
<mat-select placeholder="Condiciones de entrega" formControlName="selectCondicionesEntrega"
(selectionChange)="condicionesEntregaChange($event, i)" required>
<mat-option *ngFor="let condicion of listCondiciones" [value]="condicion">
{{condicion.descripcion}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="col-md-3">
<mat-form-field appearance="outline">
<mat-label>Código</mat-label>
<input formControlName="condicionesCodigo"
[value]="item.controls.selectCondicionesEntrega.value.codigo || null" matInput required disabled>
</mat-form-field>
</div>
</div>
</div>
</div>
ts:
addTransporteItem(index) {
const transporteItem = this.formBuilder.group({
selectCondicionesEntrega: ['', Validators.required],
condicionesCodigo: ['', Validators.required]
});
let formularioAnterior = transporteItem;
if (index != undefined) {
Object.assign(formularioAnterior, this.transporteForm.controls.transporteArrayItems['controls'][index]);
this.transporteForms.push(formularioAnterior);
} else {
this.transporteForms.push(transporteItem);
}
}
I'm not sure if could be because I'm copying the previous formgroup, but tried different ways and still didn't work.
Working example:
https://codesandbox.io/s/determined-satoshi-xpkpf
Thanks in advance.

Enabling a button using select box

Simply I have two radio buttons when the first radio button is selected one select box appears and when the radio button is selected two select box appears. After this, I have one button "SUBMIT" now I want that when I select first radio then the submit button must be enabled but when I select second radio button then the button must be disabled till both of the select box doesn't have some value.
I am using the form in HTML taking form-group to consider all the fields, when all the fields have some value then the only button will get enabled but in case of the above situation I got stuck.
**This is my javascript code.
I m new in this plz help.**
function statecheck(){
if (document.getElementById('state').checked = true) {
document.getElementById('ifstate').style.display = 'block';
document.getElementById('ifapmc').style.display = 'none';
document.getElementById('ifapmc').disabled = true;
}
}
function stateapmccheck(){
if (document.getElementById('apmc').checked = true) {
document.getElementById('ifapmc').style.display = 'block';
document.getElementById('ifstate').style.display = 'none';
document.getElementById('ifstate').disabled = true;
}
}
This is my Angular material code
<div>
<label>Registration Level: </label>
<mat-radio-group aria-label="Select an option"
formControlName="choosereglevel" #reglevel>
<mat-radio-button value="1" id="state"
onclick="javascript:statecheck();" color="primary">State</mat-radio
button>
<mat-radio-button value="2" id="apmc"
onclick="javascript:stateapmccheck();" color="primary">APMC</mat-radio-
button>
<!--<mat-error
*ngIf="firstFormGroup?.controls?.choosereglevel?.hasError('required')">
Please choose one <strong>level.</strong>
</mat-error>-->
</mat-radio-group>
</div>
<br>
<!--hidden select box-->
<div id="ifstate" style="display:none;">
<mat-form-field>
<mat-label>Registered With State: </mat-label>
<mat-select formControlName="choosestate" #selectstate>
<mat-option *ngFor="let selectstate of registrationstate"
[value]="selectstate.value">
{{selectstate.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<!--second T&C select box-->
<div id="ifapmc" style="display:none;">
<mat-form-field>
<mat-label>Registered With State: </mat-label>
<mat-select formControlName="choosestate" #selectstate>
<mat-option *ngFor="let selectstate of registrationstate"
[value]="selectstate.value">
{{selectstate.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-label>Registered With APMC: </mat-label>
<mat-select formControlName="chooseapmc" #selectapmc>
<mat-option *ngFor="let selectstate of
registrationapmcstate"
[value]="selectstate.value">
{{selectstate.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
Looks to me like you've got a syntax error inside your if(...) statements
When you use a single = sign it sets the property on the left of it to match the value on the right
To do a comparison you need a double ==
So try document.getElementById('state').checked == true and if document.getElementById('apmc').checked == true

Categories