File

src/app/checkout/address/add-address/add-address.component.ts

Implements

OnInit OnDestroy

Metadata

selector app-add-address
styleUrls add-address.component.scss
templateUrl ./add-address.component.html

Constructor

constructor(fb: FormBuilder, authActions: AuthActions, checkoutService: CheckoutService, addrService: AddressService, store: Store)

Methods

ngOnInit
ngOnInit()
Returns: void
onSubmit
onSubmit()
Returns: void
Private getEmailFromUser
getEmailFromUser()
Returns: void
ngOnDestroy
ngOnDestroy()
Returns: void

Properties

addressForm
addressForm: FormGroup
emailForm
emailForm: FormGroup
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
Component
Html element with directive

results matching ""

    No results matching ""