Angular-Loiane-Training

Este repositorio contem exemplos documentados e descricoes dos conteudos estudados ao longo do curso de Angular da Loiane

View project on GitHub

Adicionando campos de endereco: form Layout Bootstrap 3

Vamos adicionar novos campos ao formularios existente, utilizando o sistema de grid do Bootstrap, ao utilizar a classe form-horizontal a tela e dividida em 12 colunas de espacos iguais, basta adicionar a quantidade de colunas que cada div (ou outra tag HTML) ira preencher dentro deste range, conforme o exemplo a seguir.

<form
  #formulario="ngForm"
  class="form-horizontal"
  (ngSubmit)="onSubmit(formulario)"
>
  <div class="form-group">
    <div class="col-sm-12">
      <label for="nome">Nome</label>
      <input
        type="text"
        class="form-control"
        id="nome"
        placeholder="Insira o nome"
        name="nome"
        [(ngModel)]="usuario.nome"
        required
        [class.has-error]="nome.touched && nome.invalid"
        #nome="ngModel"
      />
      <div *ngIf="nome.touched && nome.invalid" class="alert alert-danger">
        O nome e obrigatorio
      </div>
    </div>
    <div class="col-sm-12">
      <label for="email">E-mail</label>
      <input
        type="email"
        class="form-control"
        id="email"
        placeholder="Insira o e-mail"
        name="email"
        [(ngModel)]="usuario.email"
        required
        [class.has-error]="email.touched && email.invalid"
        email
        #email="ngModel"
      />
      <div *ngIf="email.touched && email.invalid" class="alert alert-danger">
        O e-mail invalido
      </div>
    </div>
    <div class="col-md-3">
      <label for="cep" class="control-label">Cep</label>
      <input
        type="text"
        class="form-control"
        id="cep"
        name="cep"
        ngModel
        required
        #cep="ngModel"
      />
      <div *ngIf="cep.touched && cep.invalid" class="alert alert-danger">
        O cep e obrigatorio
      </div>
    </div>
    <div class="col-md-3">
      <label for="numero" class="control-label">Numero</label>
      <input
        type="text"
        class="form-control"
        id="numero"
        name="numero"
        ngModel
        required
        #numero="ngModel"
      />
      <div *ngIf="numero.touched && numero.invalid" class="alert alert-danger">
        O numero e obrigatorio
      </div>
    </div>
    <div class="col-md-6">
      <label for="complemento" class="control-label">Complemento</label>
      <input
        type="text"
        class="form-control"
        id="complemento"
        name="complemento"
        ngModel
        required
        #complemento="ngModel"
      />
    </div>
    <div class="col-md-12">
      <label for="rua" class="control-label">Rua</label>
      <input
        type="text"
        class="form-control"
        id="rua"
        name="rua"
        ngModel
        required
        #rua="ngModel"
      />
    </div>
    <div class="col-md-5">
        <label for="bairro" class="control-label">Bairro</label>
        <input
          type="text"
          class="form-control"
          id="bairro"
          name="bairro"
          ngModel
          required
          #bairro="ngModel"
        />
    </div>
    <div class="col-md-4">
      <label for="complemento" class="control-label">Cidade</label>
      <input
        type="text"
        class="form-control"
        id="complemento"
        name="complemento"
        ngModel
        required
        #complemento="ngModel"
      />
    </div>
    <div class="col-md-3">
      <label for="estado" class="control-label">Estado</label>
      <input
        type="text"
        class="form-control"
        id="estado"
        name="estado"
        ngModel
        required
        #estado="ngModel"
      />
    </div>
  </div>
  <button type="submit" class="btn btn-primary" [disabled]="formulario.invalid">
    Submit
  </button>
</form>
<app-form-debug [formulario]="formulario"></app-form-debug>

Note que para os campo de Cep e Numero sao delimitadas 3 divisoes para cada, ja para o campo Complemento 6 divisoes sao delimitadas completando a tela com 12 divisoes. os demais campos Rua, Bairro, Estado, Cidade seguem o mesmo raciocinio.


adicionados campos de endereco ao formulario