How to disable the button on the Angular?

Question

How to disable the button on the Angular?

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

Look at the form well

    <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 was the registration button not disabled?

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

In the component file I put it like this;

onSubmit(form: NgForm) {

    console.log(form);

  }

And I checked the console as it would if it were like this;

AndIsubmittedtheformandgaveit;

The valid attribute was like true knowing that it should be like false

Where is it wrong?

angular

asked by anonymous 23.05.2018 / 22:55

2 answers

Error sending data to php with ajax in wordpress passing value webapi to select html in angular 2

score 1 · Answer 1

You are mixing template forms with reactive forms

Here's a demo of how it would be

I'll show you what the code looks like with 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'); }

score 0 · Answer 2

The interesting thing would be to use formGroup , that your HTML code would be much more readable, but to solve your problem based on what you are exposing, then just tell which form you are referring to, because " registerForm "is your own form, but you are putting" registerForm.form ",

Your current input :

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

How your input should stay:

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

Done, if your problem has not solved yet, then you can check exactly what was missing.