使用Angular和ng-bootstrap创建一个输入地址

开课吧开课吧锤锤2021-04-28 16:24

点赞
有用
分享分享

    在本文中,您将逐步学习如何创建输入地址组件。当我们想要节省空间并更好地在表单中组织输入时,此功能很有用。

    用户可以轻松地从一个位置读取和操作地址字段。我们组件的最终输出将如下图所示:

web

    背景

    在开始之前,建议您满足以下先决条件:

    VisualStudio程式码

    有关使用Angular应用程序进行开发的一些知识

    有关引导程序,typeScript和HTML的一些知识

    使用代码

    开始之前,您需要:

    安装AngularCLI。

    通过在CMD上运行以下命令行来创建新的应用程序:

ng new dialog-address-form

    通过运行以下命令安装最新版本的ng-bootstrap:

ng add @ng-bootstrap/ng-bootstrap

    安装最新版本的“font-awesome”,以方便使用图标:

npm install --save font-awesome

    A)编码

    这个想法是关于创建一个可用作输入表单的组件。此输入显示完整地址,并且可以通过模式进行编辑。

    此模式是由以下字段组成的形式:

    地址行1:必填字段,其中包含街道号和名称

    地址行2:可选字段,其中包含有关您的位置的其他详细信息

    城市:必填项

    邮政编码:必填字段

    国家:必填项

    当用户单击“保存”按钮时,结果将作为文本显示在输入字段中。

    要做到这一点:

    首先,创建Address实体:

export class Address{
  addressLine1: string;
  addressLine2: string;
  city: string;
  zipCode: number;
  country: string;

  /**

   * transform address object to string, it's useful to display data into input text.

   */

  public toStringFormat(){
    return `${this.addressLine1} ${this.addressLine2}, 
            ${this.zipCode} ${this.city}, ${this.country}`;
  }
}

    创建address表单组件:

ng generate component  address

    在“app/components”文件夹中创建“AddressComponent”:

<div class="modal-header">

  <h4 class="modal-title">Address form</h4>

  <button type="button" class="close" aria-label="Close" 
   (click)="activeModal.dismiss('exit click')">

    <span aria-hidden="true">&times;</span>
  </button>
</div>

<div class="modal-body">

  <form [formGroup]="formInstance">

    <div class="form-group">

      <label class="text-strong">address line 1 :</label>
      <input type="text" name="addressLine1" formControlName="addressLine1" 
       class="form-control form-control-sm">

    </div>

    <div class="form-group">

      <label class="text-strong">address line 2 :</label>

      <input type="text" name="addressLine2" formControlName="addressLine2" 
       class="form-control form-control-sm">

    </div>

    <div class="form-group">

      <label class="text-strong">zip code :</label>

      <input type="number" name="zipCode" formControlName="zipCode" 
       class="form-control form-control-sm" >

    </div>

    <div class="form-group">

      <label class="text-strong">city :</label>

      <input type="text" name="city" formControlName="city" 
       class="form-control form-control-sm">

    </div>

    <div class="form-group">

      <label class="text-strong">country :</label>

      <select  name="country" formControlName="country"  
       class="form-control form-control-sm" >

        <option value="">Choose a country</option>

        <option value="France">France</option>

        <option value="Germany">Germany</option>

        <option value="Italy">Italy</option>

      </select>

    </div>

  </form>

</div>

<div class="modal-footer">

  <button type="button" class="btn btn-outline-dark" 
  [disabled]="formInstance.invalid" (click)="save()">Save</button>

</div>

    修改'address.component.ts':

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { Address } from 'src/models/Address';

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

export class AddressComponent {
  formInstance: FormGroup;

  constructor(public activeModal: NgbActiveModal) {
    this.formInstance = new FormGroup(
      {
        addressLine1: new FormControl('', Validators.required),
        addressLine2: new FormControl(''),
        city: new FormControl('', Validators.required),
        zipCode: new FormControl('', Validators.required),
        country: new FormControl('', Validators.required),
      }
    )
  }

  /**

   * this method close the active modal and pass the address object 
   * to parent component.

   */

  save(){
     this.activeModal.close
          (Object.assign(new Address(), this.formInstance.value));
  }
}

    修改app.module.ts':由于AddressComponent将动态创建并加载,因此不会将其引用到模板中。你应该把它声明为EntryComponents进入app.module.ts。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AddressComponent } from './components/address/address.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';

@NgModule({

  imports: [
    BrowserModule,
    NgbModule,
    ReactiveFormsModule,
    FormsModule
  ],
  declarations: [
    AppComponent,
    AddressComponent
  ],
  entryComponents: [AddressComponent],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

    最后,在表单中使用此组件:

    修改app.component.html:

    它声明了一个新形式,该形式由“用户名”的输入文本和“地址”的另一个输入文本组成,这些文本具有按钮链接,允许从AddressComponent模式中显示的''编辑地址字段。

<div class="flex-hcenter">
  <form style="max-width: 400px;">
    <div class="form-group">
      <label class="text-strong">User Name :</label>
      <input type="text" name="userName" class="form-control form-control-sm">
    </div>
    <div class="form-group">
      <label>Address :</label>
      <div class="input-group">
        <input type="text" class="form-control" name="addressInput" 
        [value]="inputAddressTextValue" readonly />
        <span class="glyphicon glyphicon-new-window"></span>
        <div class="input-group-append">
          <span class="input-group-text" (click)="openAddressModal()">
            <i class="fa fa-external-link"></i>
          </span>
        </div>
      </div>
    </div>
  </form>
</div>

    修改app.component.ts:

    在此组件中,我们NgbModal作为服务注入以能够将'AddressComponent'打开到模式中并等待结果。

import { Component, OnInit } from '@angular/core';
import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
import { Address } from 'src/models/Address';
import { AddressComponent } from './components/address/address.component';

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

export class AppComponent implements OnInit {
  inputAddressTextValue = "";
  modalRef: NgbModalRef;

  constructor(private modalService: NgbModal) {
  }

  ngOnInit(): void {
  }

  /**

   * it shows an address component in modal, and waits for the modal to close
   * in order to display the result into the address field
   */

  openAddressModal() {

    const modalRef = this.modalService.open(AddressComponent, {
      backdrop: 'static',
      centered: true
    }).result.then((res: Address) => {
      this.inputAddressTextValue = res.toStringFormat();
    });
  }
}

    示范

    首先,通过运行'npmstart'启动Angular服务器。

    单击地址链接以打开地址组件。

    填写所有必填字段后,单击“保存”按钮。

    最后,输入地址将保留最终结果。

web

    以上就是开课吧广场小编为大家整理发布的“使用Angular和ng-bootstrap创建一个输入地址”一文,更多人Web教程相关内容尽在开课吧广场Web教程频道!

有用
分享