начал играть с AngularJS 4 и машинопись, и это сложно. Я использую Angular Reactive Forms (или модели Driven Form) и имеет Адрес, который содержит и страны поля, которые я хотел бы представить в качестве раскрывающегося списка со значениями по умолчанию. Я последовал ниже
- Создать address.ts модель (Адрес)
- Создать address.component.ts (AddressComponent)
- Создать address.component.html (шаблон)
- Импортируйте AddressComponent в свои модули (например, маршрутизатор, если у вас есть)
В модели address.ts как следовать
export class Address {
type: string;
street: string;
city: string;
postalcode: string;
provinces = ['AB', 'BC', 'MB', 'NB', 'NL', 'NS', 'NT',
'NU', 'ON', 'PE', 'QC', 'SK', 'YT'];
countries = ['Canada', 'USA'];
}
Вслед за address.component.ts
import { Component, Input, OnInit } from '@angular/core';
import { FormArray, FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Address } from '../../models/address';
@Component({
selector: 'address',
templateUrl: './address.component.html'
})
export class AddressComponent implements OnInit {
@Input()
addressForm: FormGroup;
address = new Address();
constructor (private fb: FormBuilder){}
ngOnInit(){
this.addressForm = this.fb.group({
type: ['', Validators.required],
street: [''],
city: ['', Validators.required],
postalcode: [''],
provinces: [this.address.provinces],
countries: [this.address.countries]
});
}
}
с последующим address.component.html
<form [formGroup]="addressForm" class="address">
<div class="form-group">
<label>Address type</label>
<input type="text" class="form-control" formControlName="type">
</div>
<div class="form-group">
<label>Street</label>
<input type="text" class="form-control" formControlName="street">
</div>
<div class="form-group">
<label>City</label>
<input type="text" class="form-control" formControlName="city">
</div>
<div class="form-group">
<label>Postal code</label>
<input type="text" class="form-control" (formControlName)="postalcode">
</div>
<div class="form-group">
<label>Province</label>
<select class="form-control" formControlName="provinces">
<option *ngFor="let province of address.provinces" [value]="province">
{{province}}
</option>
</select>
</div>
<div class="form-group">
<label>country</label>
<select class="form-control" formControlName="countries">
<option *ngFor="let country of address.countries" [value]="country">
{{country}}
</option>
</select>
</div>
</form>
С учетом указанных выше трех на месте, я могу вынести адрес самостоятельно, следуя приведенным ниже
- Обновление в приложение-routing.module.ts, где у меня есть собственные маршруты
- Обновление в app.module.ts
- Обновлять app.component.ts включать адрес в выпускном маршрутизатор теге
Update в приложение-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { UserRegistrationComponent } from '../user/user-registration.component';
//temporary
import { AddressComponent } from '../address/address.component';
const routes : Routes = [
{ path: 'user/register', component: UserRegistrationComponent },
{ path: 'temp/address', component: AddressComponent }
]
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}
Вслед за app.module.TS импортировать AddressComponent и включить его в деклараций массив NgModule декоратор
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppRoutingModule } from './modules/app-routing.module'
import { AppComponent } from './app.component';
import { UserService } from './services/user.service'
import { UserRegistrationComponent } from './user/user-registration.component';
//import temporary
import { AddressComponent } from './address/address.component';
@NgModule({
imports: [
BrowserModule,
ReactiveFormsModule,
HttpModule,
AppRoutingModule
],
declarations: [
AppComponent,
UserRegistrationComponent,
AddressComponent
],
exports : [
],
providers: [
UserService
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
И, наконец, обновить app.component.ts шаблон HTML, чтобы включить ссылку компонента адреса в так что мы можем перейти к нему и увидеть форму адреса в действии.
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<div class="container">
<h1>Sample</h1>
<nav>
<a routerLink="/user/register" routerLinkActive="active">Register User</a><br>
<a routerLink="/temp/address" routerLinkActive="active">Address</a>
</nav>
<router-outlet></router-outlet>
</div>
`,
})
export class AppComponent { name = 'Sample'; }
И что это. Визуализированная форма адреса выглядит следующим образом:
Теперь у меня есть адрес реактивной компонента формы, который можно встраивать в любом месте мне нужно поле адреса. Он действительно много кода для поля адреса. Новый для AngularJS 4 и Typcript, поэтому код может иметь ошибки.
Более простой способ: https://stackoverflow.com/a/41180705/4654957 –