1

Observem bem o formulário

    <form #registerForm="ngForm" (ngSubmit)="onSubmit(registerForm)" class="col-lg-10" >
        <p>
          <label >Nome</label>
          <input type="text"  name="name" #name="ngModel" [(ngModel)]="user.name"  class="form-control" required/>
            <span *ngIf="!name.valid && name.touched">
              O nome é obrigatório
            </span>
        </p>
        <p>
          <label >Sobrenome</label>
          <input type="text"  name="surname" #surname="ngModel" [(ngModel)]="user.surname" class="form-control" required/>
            <span *ngIf="!surname.valid && surname.touched">
              O sobrenome é obrigatório
            </span>
        </p>
        <p>
          <label >Email</label>
          <input type="text"  name="email" #email="ngModel" [(ngModel)]="user.email" class="form-control" required/>
            <span *ngIf="!email.valid && email.touched">
              O email é obrigatório
            </span>
        </p>
        <p>
          <label>Senha</label>
          <input type="text"  name="password" #password="ngModel" [(ngModel)]="user.password" class="form-control" required/>
              <span *ngIf="!password.valid && password.touched">
                A senha é obrigatório
              </span>
        </p>
        <input type="submit" value="{{title}}" class="btn btn-primary" [disabled]="!registerForm.form.valid" />
    </form>
</div>

Porque será que o botão registro não ficou desabilitado?

Para saber o valor do !registerForm.form.valid se ele está verdadeiro ou false eu fiz o seguinte ...

No arquivo de componente eu coloquei assim;

onSubmit(form: NgForm) {

    console.log(form);

  }

E verifiquei no console como estaria se estivesse assim;

inserir a descrição da imagem aqui

E submeti o formulário e deu isso;

inserir a descrição da imagem aqui

O atributo valid estava como true sabendo que deveria está como false

Onde será que está errado?

17
  • 1
    verificou se a condição registerForm.form.valid está retornando false? 23/05/2018 às 21:01
  • como faço para saber?
    – user10264
    23/05/2018 às 21:03
  • se eu deixa assim ele fica desabilitado registerForm.form.valid mas se eu deixar assim ele fica habilitado !registerForm.form.valid
    – user10264
    23/05/2018 às 21:05
  • será que precisa de algum modulo para instalar?
    – user10264
    23/05/2018 às 21:10
  • 1
    Não há nada de errado em seu form, veja: stackblitz.com/edit/…
    – Marconi
    23/05/2018 às 23:46

2 Respostas 2

1

Você esta misturando template forms com reactive forms

Aqui tem uma demo de como seria

Vou te mostrar como seria o codigo com o reactive forms:

<form [formGroup]="registerForm" (ngSubmit)="onSubmit()" class="col-lg-10" >
        <p>
          <label >Nome</label>
          <input type="text"  name="name"  class="form-control" formControlName="name"/>
            <span  *ngIf="name.invalid && (name.dirty || name.touched)">
              O nome é obrigatório
            </span>
        </p>
        <p>
          <label >Sobrenome</label>
          <input type="text"name="surname" formControlName="surname"  class="form-control" />
            <span *ngIf="!surname.valid && surname.touched">
              O sobrenome é obrigatório
            </span>
        </p>
        <p>
          <label >Email</label>
          <input type="text"  name="email" formControlName="email" class="form-control" />
            <span *ngIf="!email.valid && email.touched">
              O email é obrigatório
            </span>
        </p>
        <p>
          <label>Senha</label>
          <input type="text"  name="password" class="form-control"  formControlName="password" />
              <span *ngIf="!password.valid && password.touched">
                A senha é obrigatório
              </span>
        </p>
        <input type="submit" value="{{title}}" class="btn btn-primary" [disabled]="registerForm.invalid" />
    </form>
</div>

NO ts

registerForm:FormGroup;
constructor(private fb: FormBuilder)

ngOnInit() {
    this.createForm()
}

createForm() {
    this.registerForm = this.fb.group({
        name: [ '', Validators.required], //Os nomes dentro do form control names tem que ser iguais a estes.
        surname: [ '', Validators.required],
        email: ['', Validators.required],
        password: ['', Validators.required]
    });
}


get name() { return this.registerForm.get('name'); }
get surname() { return this.registerForm.get('surname'); }
get email() { return this.registerForm.get('email'); }
get password() { return this.registerForm.get('password'); }
6
  • não resolveu, deu essa mensagem de erro no console Can't bind to 'formGroup' since it isn't a known property of 'form'. ("
    – user10264
    24/05/2018 às 10:26
  • compiler.js:486 Uncaught Error: Template parse errors: Can't bind to 'formGroup' since it isn't a known property of 'form'. (" <form [ERROR ->][formGroup]="registerForm" (ngSubmit)="onSubmit()" class="col-lg-10" > <p> <label >"): ng:///RegistroModule/RegistroComponent.html@4:10 No provider for ControlContainer (" [ERROR ->]<form [formGroup]="registerForm" (ngSubmit)="onSubmit()" class="col-lg-10" > <
    – user10264
    24/05/2018 às 10:31
  • você chegou a testar esse código antes de me passar?
    – user10264
    24/05/2018 às 10:31
  • Criei um stackblitz pra vc ver. 24/05/2018 às 10:44
  • @wladyband deu certo? 30/05/2018 às 12:49
1

O interessante seria utilizar formGroup, que seu código HTML ficaria bem mais legível, mas para resolver seu problema baseado no que está expondo, então é só informar de qual formulário você está se referindo, por que "registerForm" é seu fomulário, mas você está colocando "registerForm.form", então perceba como poderá dar certo abaixo:

Seu input atualmente:

<input type="submit" value="{{title}}" class="btn btn-primary" [disabled]="!registerForm.form.valid" />

Como seu input deve ficar:

<input type="submit" value="{{title}}" class="btn btn-primary" [disabled]="!registerForm.valid" />

Pronto, caso seu problema não tenha solucionado ainda, então poderá verificar exatamente o que estava faltando.

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