Last active
January 6, 2018 13:28
-
-
Save gcaraciolo/14b81e8d1a7d0d26193364fe50d7aa56 to your computer and use it in GitHub Desktop.
Angular 5 Form approach for edit/new cases - Address example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export abstract class Form { | |
protected abstract finishSubmit(); | |
protected abstract form(); | |
protected abstract createForm(); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Component } from '@angular/core'; | |
import { FormGroup, FormControl, Validators } from '@angular/forms'; | |
import { Router, ActivatedRoute } from '@angular/router'; | |
import 'rxjs/add/operator/finally'; | |
import { Address } from '../../../domain'; | |
import { AddressService } from '../../../services'; | |
import { UserAddressFormComponent } from './user-address-form.component'; | |
@Component({ | |
templateUrl: './user-address-form.component.html', | |
styleUrls: ['./user-address-form.component.css'] | |
}) | |
export class UserAddressEditComponent extends UserAddressFormComponent { | |
constructor( | |
private service: AddressService, | |
router: Router, | |
route: ActivatedRoute | |
) { | |
super(router); | |
route.data.subscribe((data: { address: any }) => { | |
if (data.address) { | |
this.address = data.address; | |
} | |
}); | |
} | |
onSubmit() { | |
return this.service.update( | |
this.id, | |
this.form() | |
).finally( | |
() => this.finishSubmit() | |
).subscribe(); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<span class="page-title">Editar Endereço</span> | |
<form class="basic-form" [formGroup]="addressForm" role="form"> | |
<mat-form-field> | |
<input matInput placeholder="CEP" formControlName="zipcode"> | |
</mat-form-field> | |
<mat-form-field> | |
<input matInput placeholder="Logradouro" formControlName="street"> | |
</mat-form-field> | |
<mat-form-field> | |
<input matInput placeholder="Número" formControlName="number"> | |
</mat-form-field> | |
<mat-form-field> | |
<input matInput placeholder="Complemento" formControlName="complement"> | |
</mat-form-field> | |
<mat-form-field> | |
<input matInput placeholder="Bairro" formControlName="neighborhood"> | |
</mat-form-field> | |
<mat-form-field> | |
<input matInput placeholder="Cidade" formControlName="city"> | |
</mat-form-field> | |
<mat-form-field> | |
<input matInput placeholder="Estado" formControlName="state"> | |
</mat-form-field> | |
<mat-form-field> | |
<input matInput placeholder="País" formControlName="country"> | |
</mat-form-field> | |
<go-back-and-save-btn goback="/user/my-informations" fxLayoutAlign="end" | |
(save)="addressForm.valid && onSubmit()"></go-back-and-save-btn> | |
</form> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Component } from '@angular/core'; | |
import { FormGroup, FormControl, Validators } from '@angular/forms'; | |
import { Router, ActivatedRoute } from '@angular/router'; | |
import { Address } from '../../../domain'; | |
import { AddressService } from '../../../services'; | |
import { Form } from '../../../utils/form'; | |
export class UserAddressFormComponent extends Form { | |
private _address: Address = {}; | |
protected addressForm: FormGroup; | |
protected id: Number; | |
constructor ( | |
protected router: Router | |
) { | |
super(); | |
this.createForm(); | |
} | |
public get address() { | |
return this._address; | |
} | |
public set address(address: Address) { | |
this.id = address.id; | |
this._address = address; | |
const addressForm = {...address}; | |
delete addressForm.id; | |
this.addressForm.setValue(addressForm); | |
} | |
protected finishSubmit() { | |
return this.router.navigate(['/user/my-informations']); | |
} | |
protected form() { | |
return { | |
zipcode: this.addressForm.get('zipcode').value, | |
street: this.addressForm.get('street').value, | |
number: this.addressForm.get('number').value, | |
complement: this.addressForm.get('complement').value, | |
neighborhood: this.addressForm.get('neighborhood').value, | |
city: this.addressForm.get('city').value, | |
state: this.addressForm.get('state').value, | |
country: this.addressForm.get('country').value, | |
}; | |
} | |
protected createForm() { | |
this.addressForm = new FormGroup({ | |
zipcode: new FormControl(this.address.zipcode), | |
street: new FormControl(this.address.street), | |
number: new FormControl(this.address.number), | |
complement: new FormControl(this.address.complement), | |
neighborhood: new FormControl(this.address.neighborhood), | |
city: new FormControl(this.address.city), | |
state: new FormControl(this.address.state), | |
country: new FormControl(this.address.country), | |
}); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Component } from '@angular/core'; | |
import { FormGroup, FormControl, Validators } from '@angular/forms'; | |
import { Router, ActivatedRoute } from '@angular/router'; | |
import 'rxjs/add/operator/finally'; | |
import { Address } from '../../../domain'; | |
import { AddressService } from '../../../services'; | |
import { UserAddressFormComponent } from './user-address-form.component'; | |
@Component({ | |
templateUrl: './user-address-form.component.html', | |
styleUrls: ['./user-address-form.component.css'] | |
}) | |
export class UserAddressNewComponent extends UserAddressFormComponent { | |
constructor( | |
private service: AddressService, | |
router: Router | |
) { | |
super(router); | |
} | |
onSubmit() { | |
return this.service.create( | |
this.form() | |
).finally( | |
() => this.finishSubmit() | |
).subscribe(); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
ajustar onSubmit para só chamar o finishSubmit() em caso de sucesso