|
在本文中，您將逐步學(xué)習(xí)如何創(chuàng)建輸入地址組件。當(dāng)我們想要節(jié)省空間并更好地在表單中組織輸入時(shí)，此功能很有用。 用戶(hù)可以輕松地從一個(gè)位置讀取和操作地址字段。我們組件的最終輸出將如下圖所示：
背景在開(kāi)始之前，建議您滿足以下先決條件： VisualStudio程式碼 有關(guān)使用Angular應(yīng)用程序進(jìn)行開(kāi)發(fā)的一些知識(shí) 有關(guān)引導(dǎo)程序，typeScript和HTML的一些知識(shí) 使用代碼開(kāi)始之前，您需要： 安裝AngularCLI。 通過(guò)在CMD上運(yùn)行以下命令行來(lái)創(chuàng)建新的應(yīng)用程序： ng new dialog-address-form1復(fù)制代碼類(lèi)型：[html] 通過(guò)運(yùn)行以下命令安裝最新版本的ng-bootstrap： ng add @ng-bootstrap/ng-bootstrap1復(fù)制代碼類(lèi)型：[html] 安裝最新版本的“font-awesome”，以方便使用圖標(biāo)： npm install --save font-awesome1復(fù)制代碼類(lèi)型：[html] A）編碼這個(gè)想法是關(guān)于創(chuàng)建一個(gè)可用作輸入表單的組件。此輸入顯示完整地址，并且可以通過(guò)模式進(jìn)行編輯。 此模式是由以下字段組成的形式： 地址行1：必填字段，其中包含街道號(hào)和名稱(chēng) 地址行2：可選字段，其中包含有關(guān)您的位置的其他詳細(xì)信息 城市：必填項(xiàng) 郵政編碼：必填字段 國(guó)家：必填項(xiàng) 當(dāng)用戶(hù)單擊“保存”按鈕時(shí)，結(jié)果將作為文本顯示在輸入字段中。 要做到這一點(diǎn)： 首先，創(chuàng)建Address實(shí)體： 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復(fù)制代碼類(lèi)型：[html]創(chuàng)建address表單組件： ng generate component address1復(fù)制代碼類(lèi)型：[html] 在“app/components”文件夾中創(chuàng)建“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復(fù)制代碼類(lèi)型：[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復(fù)制代碼類(lèi)型：[html]修改app.module.ts'：由于AddressComponent將動(dòng)態(tài)創(chuàng)建并加載，因此不會(huì)將其引用到模板中。你應(yīng)該把它聲明為EntryComponents進(jìn)入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復(fù)制代碼類(lèi)型：[html]最后，在表單中使用此組件： 修改app.component.html： 它聲明了一個(gè)新形式，該形式由“用戶(hù)名”的輸入文本和“地址”的另一個(gè)輸入文本組成，這些文本具有按鈕鏈接，允許從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復(fù)制代碼類(lèi)型：[html] 修改app.component.ts： 在此組件中，我們NgbModal作為服務(wù)注入以能夠?qū)?AddressComponent'打開(kāi)到模式中并等待結(jié)果。 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復(fù)制代碼類(lèi)型：[html]示范首先，通過(guò)運(yùn)行'npmstart'啟動(dòng)Angular服務(wù)器。 單擊地址鏈接以打開(kāi)地址組件。 填寫(xiě)所有必填字段后，單擊“保存”按鈕。 最后，輸入地址將保留最終結(jié)果。
|
|
|
來(lái)自： 碼農(nóng)9527 > 《WEB》
