clv-angular-boot
v3.0.2
Published
This library is a bootstrap project for angular framework.
Downloads
10
Readme
ClvAngularBoot
This library is a bootstrap project for angular framework.
Installation
Run npm install clv-angular-boot --save
to install library and import ClvAngularBoot in your AppModule or other Module.
And Enjoys.
Usages
In your Module
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {HttpClientModule} from '@angular/common/http';
import {ClvAngularBootModule} from 'clv-angular-boot'; // < ---- import module
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
HttpClientModule,
ReactiveFormsModule,
// ...
ClvAngularBootModule, // <----- add module here
// ...
]
})
export class AppModule {
}
Manage forms
1/- First create your models
export class AdresseModel {
ville: string;
pays: string;
constructor(ville: string, pays: string) {
this.ville = ville;
this.pays = pays;
}
}
export class TelephoneModel {
numero = 2;
adresse: AdresseModel = new AdresseModel('', '');
}
export class PersonneModel {
nom: string = 'John';
prenoms: string = 'Doe';
adresse: AdresseModel = new AdresseModel('', '');
telephones: TelephoneModel[] = [new TelephoneModel()];
}
2/- Create a form component
@Component({
selector: 'app-form-test',
template: `
<form [formGroup]="formGroup" (submit)="sendForm()">
<!-- simple data -->
<input placeholder="nom" formControlName="nom"/>
<input placeholder="prenoms" formControlName="prenoms"/>
<!-- object data -->
<div formGroupName="adresse">
<input placeholder="ville" formControlName="ville"/>
<input placeholder="pays" formControlName="pays"/>
</div>
<!-- collection datas -->
<div formArrayName="telephones">
<h3>telephones</h3>
<button type="button" (click)="addSmartFormGroup(formGroup, objectsFindMasks(personne)[0], 'telephones')">Ajouter</button>
<div *ngFor="let tel of getControls(formGroup, 'telephones');let i=index">
<button type="button" (click)="removeSmartFormGroup(formGroup, i, 'telephones')">Supprimer</button>
<div [formGroupName]="i">
<input placeholder="numero" formControlName="numero"/>
<div formGroupName="adresse">
<input placeholder="pays" formControlName="pays"/>
</div>
</div>
</div>
</div>
<button type="submit">Send</button>
<button type="reset">reset</button>
</form>
`
})
export class FormTestComponent extends ClvForm implements OnInit {
personne = new PersonneModel();
constructor(public httpClient: HttpClient,
alertShower: ClvAlertMessageShower,
toastShower: ClvToastMessageShower,
snakeShower: ClvSnakebarMessageShower) {
super(httpClient, alertShower, toastShower, snakeShower);
this.requestSetter.url = 'http://localhost:4200';
this.requestSetter.method = ClvRequestMethod.POST;
}
ngOnInit(): void {
this.buildFormByObject(new PersonneModel());
}
}
APIs
1- ClvRequest
Create a request object.
2- ClvRequestSender
Send ClvRequest by call of sendRequest(request: ClvRequest) method, and return an Observable<HttpResponse>
3- ClvForm
Create an angular reactive form from any object given in parameter of buildFormByObject(obj: any)