Accessing several values in Angular by clicking

Question

Accessing several values in Angular by clicking

I have a dropdown that contains an input field and two more dropdowns. I am looking for a way to retrieve the values of all three fields when the search button is clicked.

Screenshot

https://i.sstatic.net/5Imaq.png

Code

HTML

<nz-dropdown-menu #menu="nzDropdownMenu">
    <div class="card search-box p-2">
        <div class="mb-2">
            <label for="">Search By {{ column.name }}</label> <br>
            <input nz-input placeholder="Type here..." />
        </div>

        <div class="mb-2">
            <label for="sort">Sort Order</label> <br>
            <nz-select ngModel="none" class="text-left mr-2" style="width:100%;">
                <nz-option nzValue="none" nzLabel="None"></nz-option>
                <nz-option nzValue="asc" nzLabel="Ascending"></nz-option>
                <nz-option nzValue="desc" nzLabel="Descending"></nz-option>
            </nz-select>
        </div>

        <div class="mb-2">
            <label for="op">Filter Column</label> <br>
            <nz-select ngModel="contains" class="text-left mr-2" style="width:100%;">
                <nz-option nzValue="contains" nzLabel="Contains"></nz-option>
                <nz-option nzValue="like" nzLabel="Like"></nz-option>
            </nz-select>
        </div>
        
        <button type="button" class="btn btn-warning w-100 mt-2" (click)="search()"><i class="fe fe-search"></i> Search</button>
    </div>
</nz-dropdown-menu>

Component

search(): void {
   // Code to retrieve values will go here
}

javascript angular typescript

Answer 1

Answer №1

By utilizing ReactiveForms, you have the ability to access form values as required

RETRIEVING FORM DATA USING REACTIVEFORMMODULE :-

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule ,ErrorHandler } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
declarations: [],
imports: [ FormsModule,ReactiveFormsModule]});

export class AppModule { }

COMPONENT.TS

import { Component,OnInit } from '@angular/core';
import {FormGroup,FormControl,Validators,FormArray} from '@angular/forms';
import {Observable} from 'rxjs/Observable';
.
.
.
public formName: FormGroup;
constructor(private formsModule: FormsModule) {
 this.formName =  this.formBuilder.group({
   firstName:  [null, Validators.required],
   lastName:  [null, Validators.required],
 })
} 

 onSubmit() {
   console.log(this.formName.value);
 }

COMPONENT.HTML

<form [formGroup]="formName" (ngSubmit)="onSubmit()">
   <div>
     <input type="number" formControlName="firstName">
   </div>
   <div>
     <input type="number" formControlName="lastName">
   </div>
  <button class="btn btn-primary" type="submit">Submit</button> 
</form>

OUTPUT in CONSOLE

{firstName : ... , lastName : ...}

Expecting this to be useful for everyone!

Answer 2

By utilizing ReactiveForms, you have the ability to access form values as required

RETRIEVING FORM DATA USING REACTIVEFORMMODULE :-

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule ,ErrorHandler } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
declarations: [],
imports: [ FormsModule,ReactiveFormsModule]});

export class AppModule { }

COMPONENT.TS

import { Component,OnInit } from '@angular/core';
import {FormGroup,FormControl,Validators,FormArray} from '@angular/forms';
import {Observable} from 'rxjs/Observable';
.
.
.
public formName: FormGroup;
constructor(private formsModule: FormsModule) {
 this.formName =  this.formBuilder.group({
   firstName:  [null, Validators.required],
   lastName:  [null, Validators.required],
 })
} 

 onSubmit() {
   console.log(this.formName.value);
 }

COMPONENT.HTML

<form [formGroup]="formName" (ngSubmit)="onSubmit()">
   <div>
     <input type="number" formControlName="firstName">
   </div>
   <div>
     <input type="number" formControlName="lastName">
   </div>
  <button class="btn btn-primary" type="submit">Submit</button> 
</form>

OUTPUT in CONSOLE

{firstName : ... , lastName : ...}

Expecting this to be useful for everyone!

Answer 3

Answer №2

To implement form controls in Angular, you can utilize the built-in features provided by the framework. Here's an example of how you can use form controls within your Angular component:

 <nz-dropdown-menu #menu="nzDropdownMenu">
    <div class="card search-box p-2">
      <div class="mb-2">
        <label for="">Search By {{ column.name }}</label> <br>
        <input nz-input placeholder="Type here..." formControl="searchControl"/>
      </div>

      <div class="mb-2">
        <label for="sort">Sort Order</label> <br>
        <nz-select ngModel="none" class="text-left mr-2" style="width:100%;" formControl="orderControl">
            <nz-option nzValue="none" nzLabel="None"></nz-option>
            <nz-option nzValue="asc" nzLabel="Ascending"></nz-option>
            <nz-option nzValue="desc" nzLabel="Descending"></nz-option>
        </nz-select>
      </div>

      <div class="mb-2">
        <label for="op">Filter Column</label> <br>
        <nz-select ngModel="contains" class="text-left mr-2" style="width:100%;" formControl="filterControl">
            <nz-option nzValue="contains" nzLabel="Contains"></nz-option>
            <nz-option nzValue="like" nzLabel="Like"></nz-option>
        </nz-select>
      </div>
      <button type="button" class="btn btn-warning w-100 mt-2" (click)="search()"><i class="fe fe-search"></i> Search</button>
    </div>
</nz-dropdown-menu>

In your component.ts file, you would define the form controls like this:

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';

constructor() {} 
searchControl: FormControl = new FormControl();
filterControl: FormControl = new FormControl();
orderControl: FormControl = new FormControl();

 search() {
    console.log(searchControl.value);
 }

Alternatively, you have the option to use ngModel or form groups depending on your requirements.

Answer 4

To implement form controls in Angular, you can utilize the built-in features provided by the framework. Here's an example of how you can use form controls within your Angular component:

 <nz-dropdown-menu #menu="nzDropdownMenu">
    <div class="card search-box p-2">
      <div class="mb-2">
        <label for="">Search By {{ column.name }}</label> <br>
        <input nz-input placeholder="Type here..." formControl="searchControl"/>
      </div>

      <div class="mb-2">
        <label for="sort">Sort Order</label> <br>
        <nz-select ngModel="none" class="text-left mr-2" style="width:100%;" formControl="orderControl">
            <nz-option nzValue="none" nzLabel="None"></nz-option>
            <nz-option nzValue="asc" nzLabel="Ascending"></nz-option>
            <nz-option nzValue="desc" nzLabel="Descending"></nz-option>
        </nz-select>
      </div>

      <div class="mb-2">
        <label for="op">Filter Column</label> <br>
        <nz-select ngModel="contains" class="text-left mr-2" style="width:100%;" formControl="filterControl">
            <nz-option nzValue="contains" nzLabel="Contains"></nz-option>
            <nz-option nzValue="like" nzLabel="Like"></nz-option>
        </nz-select>
      </div>
      <button type="button" class="btn btn-warning w-100 mt-2" (click)="search()"><i class="fe fe-search"></i> Search</button>
    </div>
</nz-dropdown-menu>

In your component.ts file, you would define the form controls like this:

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';

constructor() {} 
searchControl: FormControl = new FormControl();
filterControl: FormControl = new FormControl();
orderControl: FormControl = new FormControl();

 search() {
    console.log(searchControl.value);
 }

Alternatively, you have the option to use ngModel or form groups depending on your requirements.

Accessing several values in Angular by clicking

Screenshot

Code

Answer №1

Answer №2

Similar questions

"Threads snap as soon as they begin to be put to use

Is it possible to use a server action in Next.js to both retrieve data and refresh the page?

Changing the Position of HTML Scripts in React

Can you guide me on how to generate a personalized stamp within the Angular component using Grapecity GcPdfViewer?

Suggestions for resolving this problem when attempting to add an item to an array

Warning in TypeScript when attempting to modify a single state property within a React component

What could be causing the subscription in reactive form to not function properly?

Guide to deploying a React application using Material-UI and react-router

Typescript: Enhance your coding experience with intelligent parameter suggestions for functions

What is the procedure for submitting all checkbox values through Google Apps Script?

Acquire information asynchronously in JavaScript while inside a for loop

Changing the border of an iframe element using jQuery or Javascript from within the iframe itself

Attempting to retrieve dynamically generated input fields and cross-reference them with structured length .json data

Encountered an exception while trying to retrieve data with a successful status code of 200

Leveraging image values for selecting an image from a collection and showcasing it (Javascript)

retrieving data from Redis with the help of Node.js

Guide on Sending a POST Request via HTTPS in Websites

Having difficulties executing the npm command to install @ionic/cli-plugin-angular@latest with --save-dev and --save-exact flags on Ionic version 3.2.0

Retrieving URL parameters within an API route handler in Next.js

Target only the <a> elements within a specific <div> using JavaScript