### 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)`
Defined in src/app/checkout/address/add-address/add-address.component.ts:19

### Methods

ngOnInit
`ngOnInit()`
Defined in src/app/checkout/address/add-address/add-address.component.ts:33
Returns: `void`

onSubmit
`onSubmit()`
Defined in src/app/checkout/address/add-address/add-address.component.ts:36
Returns: `void`

Private getEmailFromUser
`getEmailFromUser()`
Defined in src/app/checkout/address/add-address/add-address.component.ts:49
Returns: `void`

ngOnDestroy
`ngOnDestroy()`
Defined in src/app/checkout/address/add-address/add-address.component.ts:53
Returns: `void`

### Properties

addressForm
`addressForm: `FormGroup``
Defined in src/app/checkout/address/add-address/add-address.component.ts:17

emailForm
`emailForm: `FormGroup``
Defined in src/app/checkout/address/add-address/add-address.component.ts:18

isAuthenticated
`isAuthenticated: `boolean``
Defined in src/app/checkout/address/add-address/add-address.component.ts:19

    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 ""