1. java
  2. android
  3. c#
  4. .net
  5. javascript
  6. php
  7. jquery
  8. html
  9. sql

FormBuilder + Ionic 5

Estou na seguinte situação:

a pessoa digita o seu cep, após dar tab todas as infos daquele cep irão corresponder aos campos na tela, se a pessoa tentar salvar o seu endereço sem digitar o cep tem que aparecer um AlertController de que deu erro e não possui cep, caso ela apague algum dos campos após digitar o cep também tem que aparecer que determinado campo está em branco, se todas as validações for true ela salva o endereço.

Segue abaixo o meu api.service.ts:

import { Injectable } from '@angular/core';


import { HttpClient } from '@angular/common/http';


@Injectable({
  providedIn: 'root'
})
export class ApiService {

  constructor(private http: HttpClient) { }

  getCEP(location){
    return this.http.get('https://viacep.com.br/ws/' + location + '/json')
  }


}

edit-address.page.html:

<ion-content class="ion-padding">
  <h2>Endereço</h2>
  <form [formGroup]="searchGroup">
  <ion-list class="ion-padding-top ion-padding-bottom">


    <ion-item class="ion-no-padding">
      <ion-label position="stacked">CEP</ion-label>
      <ion-input formControlName="cep" maxlength="9" [brmasker]="{mask:'00000-000', len:9, type: 'num'}" type="numeric" (ionBlur)="getCep()" type="text" placeHolder="Ex: 87000-000"></ion-input>
    </ion-item>



    <ion-item class="ion-no-padding">
      <ion-label position="stacked">Endereço Completo</ion-label>
      <ion-input formControlName="street" type="text" placeHolder="Ex: Via Rosalina"></ion-input>
    </ion-item>

    <ion-item class="ion-no-padding">
      <ion-label position="stacked">N°</ion-label>
      <ion-input formControlName="number" type="text" placeHolder="Ex: N° 105"></ion-input>
    </ion-item>



    <ion-item class="ion-no-padding">
      <ion-label position="stacked">Complemento</ion-label>
      <ion-input formControlName="complement" type="text" placeHolder="Ex:bloco 2 apartamento 501"></ion-input>
    </ion-item>


    <ion-grid>
      <ion-row>
        <ion-col size="8">
          <ion-item class="ion-no-padding">
            <ion-label position="stacked">Cidade</ion-label>
            <ion-input formControlName="city" type="text" placeHolder="Ex: São Paulo"></ion-input>
          </ion-item>



        </ion-col>
        <ion-col size="4">
          <ion-item class="ion-no-padding">
            <ion-label position="stacked">Estado</ion-label>
            <ion-select color="dark" formControlName="state" name="state" placeholder="Ex: PR" ok-text="Confirmar" cancel-text="Cancelar">
              <ion-select-option value="AC">AC</ion-select-option>
              <ion-select-option value="AL">AL</ion-select-option>
              <ion-select-option value="AP">AP</ion-select-option>
              <ion-select-option value="AM">AM</ion-select-option>
              <ion-select-option value="BA">BA</ion-select-option>
              <ion-select-option value="CE">CE</ion-select-option>
              <ion-select-option value="DF">DF</ion-select-option>
              <ion-select-option value="ES">ES</ion-select-option>
              <ion-select-option value="GO">GO</ion-select-option>
              <ion-select-option value="MA">MA</ion-select-option>
              <ion-select-option value="MT">MT</ion-select-option>
              <ion-select-option value="MS">MS</ion-select-option>
              <ion-select-option value="MG">MG</ion-select-option>
              <ion-select-option value="PA">PA</ion-select-option>
              <ion-select-option value="PB">PB</ion-select-option>
              <ion-select-option value="PR">PR</ion-select-option>
              <ion-select-option value="PE">PE</ion-select-option>
              <ion-select-option value="PI">PI</ion-select-option>
              <ion-select-option value="RJ">RJ</ion-select-option>
              <ion-select-option value="RN">RN</ion-select-option>
              <ion-select-option value="RS">RS</ion-select-option>
              <ion-select-option value="RO">RO</ion-select-option>
              <ion-select-option value="RR">RR</ion-select-option>
              <ion-select-option value="SC">SC</ion-select-option>
              <ion-select-option value="SP">SP</ion-select-option>
              <ion-select-option value="SE">SE</ion-select-option>
              <ion-select-option value="TO">TO</ion-select-option>
            </ion-select>
          </ion-item>




        </ion-col>



      </ion-row>



    </ion-grid>




  </ion-list>
</form>
  <ion-button class="ion-margin-top" expand="block" (click)="saveAddress()">Salvar</ion-button>
</ion-content>

e meu edit-address.page.ts:

import { Component, OnInit } from '@angular/core';

import { ApiService } from "../../services/api.service";
import { AlertController } from '@ionic/angular';
import { FormGroup, FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-edit-address',
  templateUrl: './edit-address.page.html',
  styleUrls: ['./edit-address.page.scss'],
})


export class EditAddressPage implements OnInit {

  cep: string = '';
  value = '';
  showInfo: boolean = false;

  public searchGroup: FormGroup;
  public searchData: any;

  constructor(private searchBuilder: FormBuilder , private apiService: ApiService) { }

  ngOnInit() { 
    this.searchGroup = this.searchBuilder.group({
      cep: [''],
      street: [''],
      number:  [''],
      complement: [''],
      city: ['']
    });
  }

  getCep() {
    if (this.cep != '' && this.cep.length === 8) {
      this.apiService.getCEP(this.cep).subscribe(data => {
        this.searchData = data;
        this.cep = '';
        console.log(this.searchData);
        console.log(this.cep);
        this.showInfo = true;
      }, err=>{
        this.showInfo = false;
        console.log(err);
      });
    }

  }


  saveAddress(){
    console.log(this.searchGroup.value)
  }


}
  1. Você vai ver essas setas em qualquer página de pergunta. Com elas, você pode dizer se uma pergunta ou uma resposta foram relevantes ou não.
  2. Edite sua pergunta ou resposta caso queira alterar ou adicionar detalhes.
  3. Caso haja alguma dúvida sobre a pergunta, adicione um comentário. O espaço de respostas deve ser utilizado apenas para responder a pergunta.
  4. Se o autor da pergunta marcar uma resposta como solucionada, esta marca aparecerá.
  5. Clique aqui para mais detalhes sobre o funcionamento do GUJ!

0 resposta

Não é a resposta que estava procurando? Procure outras perguntas com as tags javascript ou faça a sua própria pergunta.