Documentation

Class: Form

mvcomponents/container. Form

A finalidade deste container é facilitar o trabalho com estruturas de formulários. Possui métodos auxiliares que facilitam o gerenciamento dos componentes a ele adicionados, para isto deve ser estendida pela classe final e cada campo que se deseje gerenciar deve ser uma propriedade da classe.

new Form()

Example
import {Button} from "mvcomponents/button";
import {EMouseEvent} from "mvcomponents/component";
import {Form} from "mvcomponents/container";
import {TextInput, PassWordInput} from "mvcomponents/input";

export interface IDadosDeLogin {
    login: string;
    senha: string;
}

export class LoginForm extends Form<IDadosDeLogin>{

 private txtLogin: TextInput;
 private txtSenha: PassWordInput;
 private btnOK: Button;

 constructor () {
     super();
     this.txtLogin = new TextInput("login");
     this.txtLogin.setLabel("Login");
     this.txtLogin.setName("login");
     this.txtLogin.setSize(12);

     this.txtSenha = new PassWordInput("senha");
     this.txtSenha.setLabel("Senha");
     this.txtSenha.setName("senha");
     this.txtSenha.setSize(12);

     this.btnOK = new Button("OK");
     this.btnOK.addEvent(EMouseEvent.CLICK, () => {
         console.log(this.recuperarDadosDeLogin());
     });
     this.btnOK.setSize(12);

     this.append(this.txtLogin);
     this.append(this.txtSenha);
     this.append(this.btnOK);
 }
 //recupera os dados do login
 public recuperarDadosDeLogin(): IDadosDeLogin {
     return this.getData();
 }

}
//arquivo main.ts
 import {Button} from "mvcomponents/button";
 import {EMouseEvent} from "mvcomponents/component";
 import {TextInput, PassWordInput} from "mvcomponents/input";
 import {ViewPager, Box, Form} from "mvcomponents/container";
 import {LoginForm} from "./login-form";


 let boxContainer:Box = new Box();
 let form:LoginForm = new LoginForm();
 form.setSize(12);
 boxContainer.append(form);
 boxContainer.setSize(4);

 let page:ViewPager = new ViewPager();
 page.append(boxContainer);
 page.appendTo("#conteudo");

Methods

clear()

Limpa visualmente todos os campos do formulario que estejam marcado como 'cleanable', mas não seta o valor default de cada campo.

See:
  • Form.reset
Returns:
Type
Form

getData()

Retorna um objeto T contendo nas propriedades os valores encontrados nos campos do formulário cujas propriedades IInput.getName combinam com as propriedades de T.

Returns:
Type
T

isValid()

Verifica a ultima validação dos métodos IInput.isValid e IInput.isTransient de cada um dos campos adicionados ao formulário.

See:
  • IInput.isValid
  • IInput.isTransient
Returns:
Type
boolean

reset()

Reseta os campos para os seus valores padrão.

See:
  • IInput.reset
Returns:
Type
this

setData()

Associa os valores das propriedades de um objeto literal javascript aos campos do formulário. A premissa é que as propriedades devem combinar os valores atribuidos à propriedade IInput.getName de cada um dos campos adicionados ao formulário.

Returns:
Type
Form
Example
//esse código vai atribuir o valor da propriedade `nome` do objeto `usr`
//ao campo do formulário cuja a propriedade setName tenha o valor `nome`

interface Usuario {nome: string};
let usr:Usuario = {nome: "Bart"};
form.setData<Usuario>(usr);

validate()

Dispara a validação do formulário retornando uma Promise após a sua conclusão.

See:
  • Form.onValidate
Returns:
Type
Promise
Example
let form = new Form();
form.append(new InputText());
form.onValidate.subscribe(()=>console.log('formulário válido'));
form.validate();