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

Limpar os Formularios - Consolidando Conhecimentos

Não estou conseguindo entender a lógica de criar uma função para limpar os campos do formulario, poderiam me jogar um pouco de luz ? rs


class NegociacaoController {

    constructor() {

        let $ = document.querySelector.bind(document);
        this._inputData = $('#data');
        this._inputQuantidade = $('#quantidade');
        this._inputValor = $('#valor');
    }

    adiciona(event) {

        event.preventDefault();

        let data = new Date(...this._inputData
            .value.split('-')
            .map((item, indice) => item - indice % 2));

        let negociacao = new Negociacao(
            data,
            this._inputQuantidade.value,
            this._inputValor.value
        );

        console.log(negociacao);
        this._inputQuantidade.value = 1;
        this._inputValor.value = 0.0;
        this._inputData.focus();
    }


}
6 respostas
solução!

Depois que vc preenche o formulário e monta a negociação, os valores continuam lá.. experimenta comentar as últimas 3 linhas? Elas estão aí justamente para atribuir valores padrões para que a pessoa possa preencher o formulário de novo, partindo do zero :).

É típico de aplicações mantém estado, como é caso da sua página com javascript.

Pegando o que Alberto disse, você vai criar um método na sua classe que isola as instruções que limpam o formulário. Aliás, faço isso no vídeo.

Então, eu isolei o metódo após adiciona, porém eu não entendi muito bem onde devo chama-lá para que, os campos do form sejam resetados.

Tentei utilizar o .reset() , porém dá erro. Já tentei colocar também no click do button, porém ele não faz a negociação. Segue abaixo o código até o momento.

// aluraframe/client/js/app/controllers/NegociacaoController.js

class NegociacaoController {

    constructor() {

        let $ = document.querySelector.bind(document);
        this._inputData = $('#data');
        this._inputQuantidade = $('#quantidade');
        this._inputValor = $('#valor');
    }

    adiciona(event) {

        event.preventDefault();

        let negociacao = new Negociacao(
            DateHelper.textoData(this._inputData.value),
            this._inputQuantidade.value,
            this._inputValor.value
        );

        console.log(negociacao);

        let dataCerta = DateHelper.dataTexto(negociacao.data);

        console.log(dataCerta);

       // limpa(); // Limpa is not defined

    }

    limpa() {

        this._inputQuantidade.value = 1;
        this._inputValor.value = 0,0;
        this._inputData.focus();
    }

}

Você não pode chamar limpa() diretamente, tem que usar this.limpa(). Se você vem de outra linguagem no qual o uso de this é opcional no JavaScript ele não é.

Uma opção, não sei se seria viável uma vez que você já tem todos os inputs mapeados, mas seria adicionar no construtor o this._form = $('form') e para limpar todos os campos bastaria chamar this._form.reset().

Não achei o video que faz isso. Os últimos videos mostram somente até a parte que cria a negociação, mas não achei a parte de limpar os campos.

Foi so um adendo.

Editando post: A parte da criação do método para limpar formulários foi realizado na aula 4, no videos Criando nosso ListModel no tempo 06:20.