如何在angular中基于ng-select填充输入框

问题描述

我想实现自动完成功能。我已经实现了 ng-select 在这里我从 API 获取数据。现在我坚持在输入框中实现自动填充。

为了更好地理解这里是示例。当用户从 ng-select 框中选择数据时，它应该自动完成输入框。我已经获取了数据，但我不知道如何将数据传递到输入框。

1. 注册页面.component.ts

import { Component,OnInit } from '@angular/core';
import { data } from 'jquery';
import { Pincodes } from 'src/app/Model/Pincodes';
import { MetadataServiceService } from 'src/app/shared/services/Metadata-service.service';
import { Observable,of } from 'rxjs';

import 'rxjs/add/operator/filter';
import { FormGroup } from '@angular/forms';




@Component({
  selector: 'app-register-page',templateUrl: './register-page.component.html',styleUrls: ['./register-page.component.css']
})

export class RegisterPageComponent implements OnInit {


 observeData :Observable< Pincodes[]>  

  modifiedText: any;
  PinSelected : any = {}
 
 searchValue : string
 form: FormGroup;
 
 constructor(private _MetadataService: MetadataServiceService) { 
   
    
    
  }

 ngOnInit(){
    
   this._MetadataService.GetPincodes()
   .subscribe(res=> {
      this.observeData = res.data;
    });

    
  
   

  


onPincodeselected(val : Pincodes){
    console.log("value" + val);
    this.customFunction(val)

    
  }
  customFunction(val : Pincodes){
    this.modifiedText = " Pin : " + val.pincode + "\n" + "  district : " + val.village + "\n" + "  Taluka : " + val.taluka
      console.log("modifiedText" + this.modifiedText); // here I successfully fetched the data from the API,Now I want to pass these data to input Box.
      console.log("Pincode Selected" + this.PinSelected);
      console.log("observeData Selected" + this.observeData);
      
   
      
      
  }
  
  

}

2. register-page.component.html

<div class="wrapper">
  <div class="main_content">
    <div class="header">
      <strong><b>Tell us more about you</b></strong>
    </div>
    <div class="info">
      <h3>Basic Details</h3>

      <form [formGroup]="form">
        <div class="form-row">
          <div class="col-md-4 mb-3">
            <label for="validationDefault01">Your Name*</label>

            <input
              type="text"
              class="form-control no-border"
              id="validationDefault01"
              placeholder="Enter your name"
              required
            />
          </div>
          <div class="col-md-4 mb-3">
            <label for="validationDefault02">Email Id</label>
            <input
              type="email"
              class="form-control"
              id="validationDefault02"
              placeholder="[e-mail]"
              required
            />
          </div>
          <div class="col-md-4 mb-3">
            <label for="validationDefault06">Pin Code*</label>
           
            <ng-select
              class="custom"
              [items]="observeData"
              name="somthing"
              bindLabel="pincode"
              autofocus
              (ngModelChange)="onPincodeselected($event)"
              [(ngModel)]="PinSelected"
              [ngModelOptions]="{ standalone: true }"
              highlightColor="#9575cd"
              highlightTextColor="#fff"
            >
            </ng-select>
            <div>
              <p>{{ modifiedText }}</p>
            </div>
          </div>
          <div class="col-md-4 mb-3">
            <label for="validationDefault03">Your Address</label>
            <input
              type="text"
              class="form-control"
              id="validationDefault03"
              placeholder="Please enter your address here"
              required
            />
          </div>
          <div class="col-md-4 mb-3">
            <label for="validationDefault04">State*</label>
            <input
              type="text"
              class="form-control"
              id="validationDefault04"
              placeholder="Your state"
              required
            />
          </div>
          <div class="col-md-4 mb-3">
            <label for="validationDefault05">district*</label>
            <input
              type="text"
              class="form-control"
              id="validationDefault05"
              placeholder="Your district"
              required
            />
          </div>
          
        </div>
        <button class="button"><span>Continue </span></button>
      </form>

  

    
    </div>
  </div>
</div>

在上面的输入框中，我想传递修改后的数据变量

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）