Enabling a button using select box - javascript

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

Related

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

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

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>

value of formControl not displayed on view

I have a form with many fields, It was made with formGroup and formControlName.
The problem is when I start the app I need to get the data from the backEnd and display it on the view.
The problem is that the field Funcion is not displaying the value:
Here is a reduced part of my html code:
<form #f="ngForm" [formGroup]="registros" class="fila-contenido">
<div class="campos">
<!-- En Venta THIS IS OK-->
<label>¿En venta?</label>
<mat-radio-group formControlName="enVenta" aria-labelledby="example-radio-group-label"
class="example-radio-group">
<mat-radio-button value="1" class="example-radio-button">Si</mat-radio-button>
<mat-radio-button value="0" class="example-radio-button">No</mat-radio-button>
</mat-radio-group>
</div>
<!-- Activo THIS IS OK-->
<div class="campos">
<label>¿Registrado?</label>
<mat-radio-group formControlName="activo" aria-labelledby="example-radio-group-label"
class="example-radio-group">
<mat-radio-button value="Si" class="example-radio-button">Si</mat-radio-button>
<mat-radio-button value="En Trámite" class="example-radio-button">En Trámite</mat-radio-button>
<mat-radio-button value="No Necesita" class="example-radio-button">No Necesita
</mat-radio-button>
<mat-radio-button value="No" class="example-radio-button">No</mat-radio-button>
</mat-radio-group>
</div>
<!-- Pais THIS IS OK-->
<mat-form-field appearance="">
<mat-label>Pais</mat-label>
<mat-select formControlName="pais">
<mat-option *ngFor="let pais of selectedPaises" [value]="pais">{{pais}}</mat-option>
</mat-select>
</mat-form-field>
<!-- Funcion THIS IS NOT OK-->
<mat-form-field appearance="">
<mat-label style=" font-weight: bold;">Función</mat-label>
<mat-select formControlName="funcion" required (selectionChange)=changeFuncion($event)>
<mat-option *ngFor="let funcion of funciones" [value]="funcion">{{funcion.Funcion}}
</mat-option>
</mat-select>
</mat-form-field>
</form>
And here is the TS code:
ngOnInit(): void {
this.getRegistros();
}
getRegistros() {
this.http.get<Registro>('http://localhost:7000/api/registros/' + this.service.getRow()).subscribe(data => {
data.log = data.log.replace(/\\"/g, '"');
console.log("formateo", JSON.parse(data.log));
let convert = JSON.parse(data.log);
this.registros.controls.enVenta.setValue(convert.enVenta); //this is OK
this.registros.controls.activo.setValue(convert.activo); //this is OK
this.registros.controls.pais.setValue(convert.pais); //this is OK
this.registros.controls.funcion.setValue(convert.funcion); //this is not OK
});
}
What I've tried:
I've a write a console.log with all the values of the form, the form has all values included the one that is not displayed.
I think it can be related to the ngOnInit problem. But I tried to put getRegistros() on ngAfterViewInit and I was having the same problem :(
Also I tried to use patchValue() instead of setValue() but same problem
Do you have any suggestions?
Thanks.
Angular uses object identity to select option. It's possible for the
identities of items to change while the data does not. This can
happen, for example, if the items are produced from an RPC to the
server, and that RPC is re-run. Even if the data hasn't changed, the
second response will produce objects with different identities.
To overcome this issue we have to provide the compareFn function to mat-select using compareWith input that tells Angular how to compare the values.
Try this:
component.html
<mat-form-field appearance="">
<mat-label style=" font-weight: bold;">Función</mat-label>
<mat-select formControlName="funcion" required (selectionChange)=changeFuncion($event) [compareWith]="compareWithFn">
<mat-option *ngFor="let funcion of funciones" [value]="funcion">{{funcion.Funcion}}
</mat-option>
</mat-select>
</mat-form-field>
component.ts
Here i am assuming your funciones object contains id property.
compareWithFn(listOfItems,selectedItem){
return listOfItems && selectedItem && listOfItems.id === selectedItem.id; ;
}
I think issue is in your template file:
Updated Template:
<mat-form-field appearance="">
<mat-label style=" font-weight: bold;">Función</mat-label>
<mat-select formControlName="funcion" required (selectionChange)=changeFuncion(funcion) [(ngModel)]="funcion">
<mat-option *ngFor="let funcion of funciones" [value]="funcion">{{funcion.Funcion}}
</mat-option>
</mat-select>
</mat-form-field>
Component:
funcion:any;

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!

ERROR Error: mat-form-field must contain a MatFormFieldControl. validation on dropdownlist

I have a angular application and I am using Angular Material
of course I googled a lot about this error message. But didnt find any suitable answare to my specific problem.
So I have a from with some dropdownlists and some radio buttons.
and every radio button option has some specific input fields. For example registrations radio button has a dropdownlist and a datepicker. But for example the radio option Inlog has only a Datepicker.
This is part of my form:
<form class="from-horizontal" #form="ngForm" [formGroup]="filterSection" (ngSubmit)="closeSearch(form)">
<div class="filter-plus mat-elevation-z8" [ngClass]="{ expanded: searchExpanded }">
<div class="filter-plus-search-fields">
<div class="search-types">
<div>
<mat-radio-group>
<mat-radio-button
*ngFor="let option of this.filterListData.searchOptions; let i = index"
[value]="i"
[checked]="i === 0"
[(value)]="option"
(change)="setSelectedSearchOptions(option.label)"
>
{{ option.label }}
</mat-radio-button>
</mat-radio-group>
</div>
</div>
<div formGroupName="groupOne">
<mat-form-field>
<div class="search-selects">
<div class="search-select searchstatus" *ngIf="!selectedSearch || hasStatusOptions(selectedSearch)">
<mat-select placeholder="Status" name="status" formControlName="selectedValue" required>
<mat-option value="">--Selecteer een status--</mat-option>
<mat-option *ngFor="let option of getStatusOptions(selectedSearch)" [value]="option.apiStatus">
{{ option.status }}
</mat-option>
</mat-select>
</div>
</div>
</mat-form-field>
</div>
</form>
So the error:
ExtendedSearchComponent.html:20 ERROR Error: mat-form-field must contain a MatFormFieldControl.
at getMatFormFieldMissingControlError (form-field.es5.js:116)
at MatFormField.push../node_modules/#angular/material/esm5/form-field.es5.js.MatFormField._validateControlChild (form-field.es5.js:703)
at MatFormField.push../node_modules/#angular/material/esm5/form-field.es5.js.MatFormField.ngAfterContentChecked (form-field.es5.js:478)
at callProviderLifecycles (core.js:18933)
at callElementProvidersLifecycles (core.js:18911)
at callLifecycleHooksChildrenFirst (core.js:18901)
at checkAndUpdateView (core.js:19832)
at callViewAction (core.js:20069)
at execComponentViewsAction (core.js:20011)
at checkAndUpdateView (core.js:19834)
occurs only when I click on a radio button that doesn't has the selectedValue dropdownlist.
So my question is: what I have to fix that the error will disappear?
Thank you
A MatFormField must contain a FormControl. In your case you have an ngIf in your control which means your control is only present when your condition matches. Move the ngIf into the mat-form-field tag and your error should be fixed.

Categories