0

Tenho um component de endereço ao qual possui um form, este sera requirido em alguns lugares e outros não então pretendo utilizar uma variavel @input required = false; para fazer isso.

Eu inicializo o formGroup no onInit assim:

     buildForm(): void {
    this.formGroup = this.fb.group({
      cep: [
        '', [
          Validators.required
        ]
      ],
      uf: [
        '', [
          Validators.required
        ]
      ],
}

Esse são alguns dos campos:

<div class="col-lg-4 col-md-4 col-sm-4">
  <div class="form-group">
    <label for="uf" class="required">UF:</label>
    <ss-dropdown formControlName="uf" (onChange)="onChangeUf($event.value)" class="component" [options]="ufs" label="label" value="value"></ss-dropdown>
    <div *ngIf="formErrors.uf" class="form-errors">
      {{ formErrors.uf }}
    </div>
  </div>
</div>
<div class="col-lg-14 col-md-14 col-sm-14">
  <div class="form-group">
    <label for="cidade" class="required">Município:</label>
    <p-autoComplete id="cidade" minLength="5" formControlName="cidade" class="component"></p-autoComplete>
    <div *ngIf="formErrors.cidade" class="form-errors" maxlength="50">
      {{ formErrors.cidade }}
    </div>
  </div>
</div>

E assim chamo meu component :

 <ss-endereco #endereco [endereco]="cliente?.endereco"></ss-endereco>

como faço para deixar o required dinamico neste caso?

1
  • 1
    Removi a tag angularjs, uma vez que essa tag representa a versão 1 do angular e a dúvida é em relação a versão mais recente. Commented 8/03/2018 às 18:24

1 Resposta 1

1

O Input é construído através de um property binding:

<ss-endereco #endereco 
             [endereco]="cliente?.endereco" 
             [required]="false">
</ss-endereco>

No script do componente, você pode inicializar o Input com um valor true por exemplo:

@Input required = true;

Sendo assim, quando nenhum valor for informado, será assumido true para a variável required.

Para adicionar o Validators.required dinamicamente, basta utilizar a variável required:

 buildForm(): void {
     let validators = [];

     if(this.required)
         validators.push(Validators.required);

     this.formGroup = this.fb.group({
         cep: ['', validators],
         uf: ['', validators]
     })
     //...
 }
6
  • Vou tentar aqui Commented 8/03/2018 às 18:50
  • estou recebendo um erro, inline template:6:94 caused by: v is not a function , acho que e na construição do formGroup, fiz como você, tem ideia do que seja? Commented 8/03/2018 às 19:04
  • acho que o problema e na forma que validators e declarado, vou fazer algumas verificações. Commented 8/03/2018 às 19:19
  • Teve um pequena alteração para funcionar mas a ideia e essa Commented 8/03/2018 às 20:05
  • 1
    @WilliamCézar e qual foi essa alteração? Assim posso completar a resposta e ajudar outras pessoas com a mesma dúvida. Commented 8/03/2018 às 21:02

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .