How to disable the button in Angular?

Question

Take a good look at the form

    <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>

Why would the button registration was not disabled?

To know the value of !registerForm.form.Valid if it is true or false I did the following ...

In the component file I put so;

onSubmit(form: NgForm) {

    console.log(form);

  }

And I checked on the console how I’d be if I was like this;

And I submitted the form and it gave this;

The attribute Valid was as true knowing you should be like false

I wonder where it’s wrong?

Answer 1

You’re mixing it up Forms template with reactive Forms

Here’s a demo what it would be like

I’ll show you what the code with the reactive Forms would look like:

<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'); }

Answer 2

The interesting thing would be to use formGroup, that your code HTML would be much more readable, but to solve your problem based on what you are exposing, then just inform of which form you are referring, why "registerForm" It’s your fluffy, but you’re putting "registerForm.form", then understand how it can work out below:

Your input currently:

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

As his input should stay:

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

There, in case your problem hasn’t solved yet, then you can check exactly what was missing.