File
Implements
Metadata
selector |
app-add-address |
styleUrls |
add-address.component.scss |
templateUrl |
./add-address.component.html |
Methods
ngOnInit
|
ngOnInit()
|
|
Returns: void
|
onSubmit
|
onSubmit()
|
|
Returns: void
|
Private getEmailFromUser
|
getEmailFromUser()
|
|
Returns: void
|
ngOnDestroy
|
ngOnDestroy()
|
|
Returns: void
|
isAuthenticated
|
isAuthenticated: boolean
|
|
import { getAuthStatus } from './../../../auth/reducers/selectors';
import { AppState } from './../../../interfaces';
import { Store } from '@ngrx/store';
import { AuthActions } from './../../../auth/actions/auth.actions';
import { AddressService } from './../services/address.service';
import { CheckoutService } from './../../../core/services/checkout.service';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Component, OnInit, OnDestroy } from '@angular/core';
@Component({
selector: 'app-add-address',
templateUrl: './add-address.component.html',
styleUrls: ['./add-address.component.scss']
})
export class AddAddressComponent implements OnInit, OnDestroy {
addressForm: FormGroup;
emailForm: FormGroup;
isAuthenticated: boolean;
constructor(
private fb: FormBuilder, private authActions: AuthActions,
private checkoutService: CheckoutService,
private addrService: AddressService,
private store: Store<AppState>) {
this.addressForm = addrService.initAddressForm();
this.emailForm = addrService.initEmailForm();
this.store.select(getAuthStatus).subscribe((auth) => {
this.isAuthenticated = auth;
});
}
ngOnInit() {
}
onSubmit() {
const address = this.addressForm.value;
let addressAttributes;
if (this.isAuthenticated) {
addressAttributes = this.addrService.createAddresAttributes(address);
} else {
const email = this.getEmailFromUser();
addressAttributes = this.addrService.createGuestAddressAttributes(address, email);
}
this.checkoutService.updateOrder(addressAttributes)
.subscribe();
}
private getEmailFromUser() {
return this.emailForm.value.email;
}
ngOnDestroy() {
}
}
<form *ngIf="!isAuthenticated" class="form" [formGroup]="emailForm">
<div class="email">
<label>
Email
<span class="required">*</span>
</label>
<input type="tel" class="full-width" formControlName="email">
<p *ngIf="emailForm.get('email').hasError('required') && emailForm.get('email').touched" class="value-err show">This is a mandatory field</p>
</div>
</form>
<form class="form" [formGroup]="addressForm" (ngSubmit)="onSubmit()">
<input type="hidden" formControlName="country_id">
<div class="pincode">
<label>
Pin Code
<span class="required">*</span>
</label>
<input type="tel" class="half-width readonly" readonly formControlName="zipcode">
<p *ngIf="addressForm.get('zipcode').hasError('required') && addressForm.get('zipcode').touched" class="value-err show">This is a mandatory field</p>
</div>
<div class="locality">
<label>
Locality / Town
<span class="required">*</span>
</label>
<input type="text" class="full-width" formControlName="address2">
<p *ngIf="addressForm.get('address2').hasError('required') && addressForm.get('address2').touched" class="value-err show">This is a mandatory field</p>
</div>
<div>
<div class="city">
<label>
City / District
<span class="required">*</span>
</label>
<input type="text" class="half-width" formControlName="city">
<p *ngIf="addressForm.get('city').hasError('required') && addressForm.get('city').touched" class="value-err show">This is a mandatory field</p>
</div>
<div class="state">
<label>
State
<span class="required">*</span>
</label>
<input type="text" class="half-width readonly" readonly formControlName="state_id">
</div>
</div>
<div>
<div class="first-name">
<label>
First Name
<span class="required">*</span>
</label>
<input type="text" class="half-width" formControlName="firstname">
<p *ngIf="addressForm.get('firstname').hasError('required') && addressForm.get('firstname').touched" class="value-err show">This is a mandatory field</p>
</div>
<div class="last-name">
<label>
Last Name
<span class="required">*</span>
</label>
<input type="text" class="half-width" formControlName="lastname">
<p *ngIf="addressForm.get('lastname').hasError('required') && addressForm.get('lastname').touched" class="value-err show">This is a mandatory field</p>
</div>
</div>
<div class="address">
<label>
Address
<span class="required">*</span>
</label>
<textarea type="text" class="full-width" formControlName="address1"></textarea>
<p *ngIf="addressForm.get('address1').hasError('required') && addressForm.get('address1').touched" class="value-err show">This is a mandatory field</p>
</div>
<div class="mobile">
<label>
Mobile No
<span class="required">*</span>
</label>
<input type="tel" class="half-width" formControlName="phone">
<p *ngIf="addressForm.get('phone').hasError('required') && addressForm.get('phone').touched" class="value-err show">This is a mandatory field</p>
</div>
<div *ngIf="isAuthenticated" class="save-button">
<button [disabled]="!addressForm.valid">SAVE</button>
</div>
<div *ngIf="!isAuthenticated" class="save-button">
<button [disabled]="!addressForm.valid && !emailForm.valid">SAVE</button>
</div>
</form>
Legend
Html element with directive