Implementation of User Input Handling
Utilizing ReactiveFormsModule allows direct retrieval of user input values for dynamic feeding to the API. Importing HttpClientModule is also essential for this process.
To implement this functionality, the following steps need to be taken:
app.module.ts
import {ReactiveFormsModule} from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [...],
imports: [...,ReactiveFormsModule, HttpClientModule],
providers: []...
Once ReactiveFormsModule and HttpClientModule are imported, FormBuilder and FormGroup can be used to dynamically track user input, and HttpClient to send GET requests to the API.
app.component.ts
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { HttpClient, HttpHeaders } from '@angular/common/http';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
productIDForm: FormGroup;
httpHeaders: new HttpHeaders({
'Content-Type': 'application/json',
})
constructor(
private formBuilder: FormBuilder,
private http: HttpClient
) { }
ngOnInit() {
this.productIDForm = this.formBuilder.group({
'productID': [null, [Validators.required, Validators.nullValidator]]
})
}
onSubmit() {
if (this.productIDForm.invalid) return;
this.getProduct(this.productID.get('productID').value).subscribe(
(res) => {
console.log(res);
},
(err) => {
console.log(err);
)
}
getProduct(productID: string): Observable<any> {
return this.http.get(
`http://localhost:8081/api/products?productId=${productID}`,
{ headers: this.httpHeaders }
)
}
}
Binding the input field to productIDForm is the next step.
app.component.html
<form [formGroup]="productIDForm">
<input formControlName="productID" type="text" class="user_id_text"/>
</form>
<div>
<input (click)="onSubmit()" type="button" />
</div>
Dynamic User Input Handling for API Interaction
Utilizing ReactiveFormsModule, FormBuilder, and FormGroup facilitates dynamic user input retrieval and binding for API PUT requests.
app.component.ts
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
productIDForm: FormGroup;
httpHeaders: new HttpHeaders({
'Content-Type': 'application/json',
})
constructor(
private formBuilder: FormBuilder,
private http: HttpClient
) { }
ngOnInit() {
this.productDetailsForm = this.formBuilder.group({
'productID': [null, [Validators.required, Validators.nullValidator]],
'purchaseDate': [null, [Validators.required, Validators.nullValidator]],
'status': [null, [Validators.required, Validators.nullValidator]]
})
}
onSubmit() {
if (this.productDetailsForm.invalid) return;
let recordNewDetails = {
"productId": this.productDetailsForm.get('productID').value,
"purchaseDate": this.productDetailsForm.get('purchaseDate').value,
"status": this.productDetailsForm.get('status').value
}
recordNewDetails = JSON.stringify(recordNewDetails);
this.updateRecord(recordNewDetails).subscribe(
(res) => {
console.log(res);
},
(err) => {
console.log(err);
)
}
updateRecord(productDetails: {}): Observable<any> {
return this.http.put(
`https://localhost:8081/api/updateRecord`m
productDetails,
{ headers: this.httpHeaders }
)
}
}
app.component.html
<form [formGroup]="productDetailsForm">
<input formControlName="productID" type="text" class="user_id_text"/>
<input formControlName="purchaseDate" type="date">
<select formControlName="status">
<option disabled>Select Status Option</option>
<option>Dispatched</option>
</select>
</form>
<div>
<input (click)="onSubmit()" type="button" />
</div>