[英]how do I add the functionality of auto-filling the address when entered the PIN CODE in Angular
This is my html file, where I want that when a user fills the PIN CODE, the rest of the addresses like DISTRICT, STATE and CITY should be auto filled using the API data.这是我的 html 文件,我希望在用户填写 PIN 码时,其他地址(如 DISTRICT、STATE 和 CITY)应使用 API 数据自动填充。
The API is: https://api.postalpincode.in/pincode/244713 API为: https : //api.postalpincode.in/pincode/244713
<div class="cardParts5">
<div class="cardTitle">
Communication Address
</div>
<div class="addressContainer">
<div class="field1">
<mat-form-field class="example-full-width" appearance="fill" class="mat-form">
<mat-label>Pin Code*</mat-label>
<input matInput maxlength="6" [(ngModel)]="pinCode" name="pinCode">
<button (click)="getAdd(pinCode)">home</button>
</mat-form-field>
</div>
<div class="field2">
<mat-form-field class="example-full-width" appearance="fill" class="mat-form">
<mat-label>State*</mat-label>
<input matInput>
</mat-form-field>
</div>
<div class="field3">
<mat-form-field class="example-full-width" appearance="fill" class="mat-form">
<mat-label>District*</mat-label>
<input matInput>
</mat-form-field>
</div>
<div class="field4">
<mat-form-field class="example-full-width" appearance="fill" class="mat-form">
<mat-label>City/Village*</mat-label>
<input matInput>
</mat-form-field>
</div>
</div>
</div>
this is my component.ts file这是我的component.ts文件
import { Component, OnInit, Input } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-final-pay',
templateUrl: './final-pay.component.html',
styleUrls: ['./final-pay.component.css']
})
export class FinalPayComponent implements OnInit {
pinDetails:any;
finalAddress:any;
public pinCode = '';
constructor( private httpClient: HttpClient ) { }
ngOnInit(): void { }
getAdd(pinCode){
this.http.get(`https://api.postalpincode.in/pincode/${pinCode}`).subscribe((val)=>{
this.pinDetails = JSON.stringify(val);
this.finalAddress = JSON.parse(this.pinDetails);
console.log(this.finalAddress);
});
}
Here I was trying to store the API details in finalAddress variable, but even if I write {{finalAddress.Message}} it gives me an error.在这里,我试图将 API 详细信息存储在 finalAddress 变量中,但即使我写了 {{finalAddress.Message}} 它也会给我一个错误。 If someone have a solution please help me.如果有人有解决方案,请帮助我。
You are in the right direction.你是在正确的方向。 You need to modify your code slightly :您需要稍微修改您的代码:
You need to add [(ngModel)]
to each of the input fields you want to populate the values.您需要将[(ngModel)]
添加到要填充值的每个输入字段。 then assign them to the variables.然后将它们分配给变量。 The API returns multiple objects of address so you need to pick one (I picked first). API 返回多个地址对象,因此您需要选择一个(我先选择了)。
Update your code :更新您的代码:
add these variables in the component :在组件中添加这些变量:
public state = '';
public block = '';
public district = '';
public city = '';
then in html assign it to the respective input field :然后在 html 中将其分配给相应的输入字段:
<input matInput [(ngModel)]="state" />
update the add method as :将 add 方法更新为:
getAdd(pinCode) {
this.httpClient
.get(`https://api.postalpincode.in/pincode/${pinCode}`)
.subscribe((val) => {
const [address] = val as any;
this.finalAddress = address;
console.log(this.finalAddress); // it returns multiple postOffices
const postOffices = this.finalAddress.PostOffice;
if (postOffices.length > 0) {
this.state = postOffices[0].State;
this.district = postOffices[0].District;
this.city = postOffices[0].Name;
}
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.