Criando um Input Widget no Yii2 – Parte 3/3

Essa é a terceira e última parte da série de posts sobre Input Widget. Para entendimento total dessa série é necessário ler PARTE 1  e a PARTE 2 para que você consiga absorver todo o conteúdo de forma didática.

Parametrizando Widget

Nosso widget tá funcionando legal, bonitinho e tudo mais. Porém, vocês já perceberam que o id dos campos de endereço (logradouro, bairro, cidade e estado) estão “chumbados” no nosso widget? Isso não é muito legal pois vai sempre obrigar os campos de endereço a ter sempre o mesmo id.

O Ideal seria de alguma forma ser enviado para o nosso componente uma lista com o id de cada campo de endereço. Para isso, lá na invocação do nosso widget podemos passar uma lista de atributos para fazermos o que bem entendermos.

Na chamada do nosso Widget, vamos fazer as seguintes modificações:

<?= $form->field($formModel, 'zipcode')->widget(MyCepInput::class, [
    'street' => 'input#addressform-street',
    'neighborhood' => 'input#addressform-neighborhood',
    'city' => 'input#addressform-city',
    'state' => 'input#addressform-state',
]) ?>

Como você já deve ter visto na documentação (ficaria um pouco decepcionado com você caso não tivesse visto), o segundo parâmetro do método widget() é uma lista de configurações para serem usadas na classe do widget, onde a chave do array representa um atributo da classe.

Vamos modificar agora nossa classe MyCepInput adicionando um atributo para cada campo de endereço e com os mesmos nomes que colocamos nas chaves do array:

class MyCepInput extends InputWidget
{
    public $options = [
        'placeholder' => 'Ex: 60445-123',
        'class' => 'form-control my-zip-code'
    ];

    public $street;
    public $neighborhood;
    public $city;
    public $state;

    ...
}

E vamos vincular os id’s dos campos passados por parâmetro no trecho de javascript, relacionando cada um dessa forma:

public function run()
{
    MyCepInputAsset::register($this->view);

    $this->view->registerJs('
        const myCepInput = new MyCepInput();       	 
        myCepInput.inputStreet = document.querySelector("'. $this->street .'");
        myCepInput.inputNeighborhood = document.querySelector("'. $this->neighborhood .'");
        myCepInput.inputCity = document.querySelector("'. $this->city .'");
        myCepInput.inputState = document.querySelector("'. $this->state .'");
    ');

    ...
}

E dessa forma, temos o nosso componente parametrizado! Dessa forma, podemos inserir de forma dinâmica o id’s dos campos de endereço, deixando nosso componente mais flexível =D.

Espero que você tenha gostado dessa série de posts que fiz com muito carinho falando sobre Input Widgets. Compartilhe com seus amigos e não deixe de comentar aqui o que você achou, dúvidas, críticas, sugestões de melhorias e etc!

Um forte abraço e espero ter contribuído pelo menos um pouco nos seus estudos.