使用Angular和ng-bootstrap创建一个输入地址
在本文中，您将逐步学习如何创建输入地址组件。当我们想要节省空间并更好地在表单中组织输入时，此功能很有用。
用户可以轻松地从一个位置读取和操作地址字段。我们组件的最终输出将如下图所示：
背景
在开始之前，建议您满足以下先决条件：
VisualStudio程式码
有关使用Angular应用程序进行开发的一些知识
有关引导程序，typeScript和HTML的一些知识
使用代码
开始之前，您需要：
安装AngularCLI。
通过在CMD上运行以下命令行来创建新的应用程序：
ng new dialog-address-form1复制代码类型：[html]
通过运行以下命令安装最新版本的ng-bootstrap：
ng add @ng-bootstrap/ng-bootstrap1复制代码类型：[html]
安装最新版本的“font-awesome”，以方便使用图标：
npm install --save font-awesome1复制代码类型：[html]
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}`;
}
}123456789101112131415161718复制代码类型：[html]
创建address表单组件：
ng generate component address1复制代码类型：[html]
在“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">×</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>12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879复制代码类型：[html]
修改'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));
}
}1234567891011121314151617181920212223242526272829303132333435363738复制代码类型：[html]
修改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 { }12345678910111213141516171819202122232425复制代码类型：[html]
最后，在表单中使用此组件：
修改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>123456789101112131415161718192021复制代码类型：[html]
修改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();
});
}
}12345678910111213141516171819202122232425262728293031323334353637复制代码类型：[html]
示范
首先，通过运行'npmstart'启动Angular服务器。
单击地址链接以打开地址组件。
填写所有必填字段后，单击“保存”按钮。
最后，输入地址将保留最终结果。
赞 (0)