Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Angular 2 checkbox

Boa tarde.

Tenho um campo status do produto que é do tipo boolean, no form é um checkbox, o problema é que ao tenta salvar o campo sempre vai null, não estou conseguindo setar o true ou falso no mesmo, alguém pode me ajudar ?

Segue abaixo o código :

produto-form

<div class="input-field col s6">
          <input type="checkbox" class="filled-in" id="filled-in-box" checked="checked" [(ngModel)]="produto.status"/>
          <label for="filled-in-box">Ativo</label>
      </div>

ProdutoFormComponent

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Router, ActivatedRoute } from '@angular/router';

import { Produto } from '../../../model/produto';
import { ProdutosService } from '../../../service/produtos.service';
import { BasicValidators } from '../../../shared/basic-validators';

@Component({
  selector: 'appprodutoform',
  templateUrl: './produto-form.component.html',
  styleUrls: ['./produto-form.component.css']
})
export class ProdutoFormComponent implements OnInit {

  form: FormGroup;
  title: string;
  produto: Produto = new Produto();

  constructor(
    formBuilder: FormBuilder,
    private router: Router,
    private route: ActivatedRoute,
    private service: ProdutosService
  ) {
    this.form = formBuilder.group({
      nome: ['', [
        Validators.required,
        Validators.minLength(3)
      ]],
      descricao: [],

      precoCusto: ['',[
        Validators.required,
        Validators.minLength(2)
      ]],
      precoVenda: ['',[
        Validators.required,
        Validators.minLength(2)
      ]], 
      estoque: ['',[
        Validators.required,
        Validators.minLength(2)
      ]],
      codigoBarras: ['',[
        Validators.required,
        Validators.minLength(2)
      ]],
      status: [],
      id: []
    });
  }

  ngOnInit() {
    var id = this.route.params.subscribe(params => {
      var id = params['id'];

      this.title = id ? 'Edit User' : 'New User';

      if (!id)
        return;

      this.service.get(id)
        .subscribe(
          produto => this.produto = produto,
          response => {
            if (response.status == 404) {
              this.router.navigate(['NotFound']);
            }
          });
    });
  }

  save() {
    var result,
        produtoValue = this.form.value;

    if (produtoValue.id){
      result = this.service.update(produtoValue);
    } else {
      result = this.service.add(produtoValue);
    }

    result.subscribe(data => this.router.navigate(['produtos/']));
  }
}

export class Produto {

  id: number;
  nome: string;
  codigoBarras: string;
  descricao: string;  
  precoCusto: number;
  precoVenda: number;
  estoque: number;
  status: boolean;

}

produto-service

add(produto): Observable<Produto>{
    return this.http.post(this.httpUtil.url(this.path), JSON.stringify(produto), this.httpUtil.headers())
                  .map(this.httpUtil.extrairDados)
                    .catch(this.httpUtil.processarErros);
  }

no debug o status vem null como segue abaixo

codigoBarras:"22112"
descricao:"221221"
estoque:21221
id:undefined
nome:"weewe"
precoCusto:211221
precoVenda:22121
status:null
3 respostas

Eu olhei seu template

<input type="checkbox" class="filled-in" id="filled-in-box" checked="checked" [(ngModel)]="produto.status"/>

Parece que o problema é no validator. Já experimentou fazer:

 status: [''],

Veja que ele recebe uma string em branco.

solução!

Boa tarde Flavio.

Encontrei o erro, estava faltando colocar formControlName="status"

<div class="input-field col s3">
                    <input type="checkbox" class="filled-in" id="filled-in-box"
                        formControlName="status" checked="checked"
                        [(ngModel)]="produto.status" ng-checked="produto.status"
                        [class.invalid]="form.controls['status'].touched && !form.controls['status'].valid" />
                    <label for="filled-in-box">Ativo*</label>
                </div>

Com essa alteração funcionou, muito obrigado

Opa! Excelente, nem tinha visto! Obrigado por compartilhar a solução!

Sucesso e bom estudo meu aluno!