Как отключить кнопку в угловых 7 - PullRequest
Новая
       35

Как отключить кнопку в угловых 7

1 голос
/ 23 апреля 2019

У меня есть Angular7 app & использование Reactive Forms Module для проверки и форм.

вот так выглядит мой шаблон. 

<div class="row" [formGroup]="jobForm">
<div class="form-group"
 [ngClass]="{'has-error': jobForm.get('jobTitle').errors && 
  (jobForm.get('jobTitle').touched || jobForm.get('jobTitle').dirty)  }">
  <input type="text" class="form-control" formControlName="jobTitle" />
  <span class="help-block" *ngIf="formError">
  {{ formError.jobTitle }}
</span>
</div>
 <br />
 <button type="button" class="btn btn-primary" disabled="jobTitle.errors.required"
(click)="submit(jobTitle,jobDesc)">Create</button>

component.ts 

import { Component, OnInit } from '@angular/core';
import { FormBuilder, Validators, FormGroup } from '@angular/forms';

@Component({
selector: 'app-create-job',
templateUrl: './create-job.component.html',
styleUrls: ['./create-job.component.css']
})
export class CreateJobComponent implements OnInit {
 constructor(private fb: FormBuilder) {}
 jobForm: FormGroup;
 formError: any;
 validationMessages = {
  jobTitle: { required: 'Job Title required'},
  jobCode: { required: 'Job Coderequired'},
  };

 ngOnInit() {
  this.jobForm = this.fb.group({
  jobTitle: ['', Validators.required]
});
this.formError = {
  jobTitle: '', jobCode : ''
};
this.jobForm.valueChanges.subscribe(data => {
  this.logValidationError(this.jobForm);
});

}

Есть 2-3 таких элемента ввода, которые имеют валидацию.

Как отключить отправку, если в какой-либо проверке произошла ошибка. Я не хочу переходить по одному свойству, как я сделал для одного.

Я имею в виду, если formError имеет какую-либо ошибку, оставьте кнопку отключенной и изначально отключенной.

Спасибо!

Ответы [ 5 ]

2 голосов
/ 23 апреля 2019

Попробуйте этот код: 

<button type="button" class="btn btn-primary" [disabled]="jobForm.form.invalid"
(click)="submit(jobTitle,jobDesc)">Create</button>
1 голос
/ 23 апреля 2019

Вам нужно использовать троичный оператор, так как отключенный принимает true и null для правильной работы

Так что вы можете попробовать 

<button 
   type="button" 
   class="btn btn-primary" 
   [disabled]="jobTitle.errors.required? true: null"
   (click)="submit(jobTitle,jobDesc)">
      Create
</button>
1 голос
/ 23 апреля 2019

Вам необходимо проверить, является ли форма valid.

<button type="submit" [disabled]="!jobForm.valid">Submit</button>

Угловые реактивные формы

0 голосов
/ 23 апреля 2019

Просто заставьте кнопку полагаться на действительность формы.

Это позаботится об ошибках, а также о нетронутых (начальных) условиях.

Пример:

<button type="button" class="btn btn-primary" [disabled]="!jobForm.valid"
(click)="submit(jobTitle,jobDesc)">Create</button>
0 голосов
/ 23 апреля 2019

Вы должны проверить, является ли форма действительной или нет. 

<form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>
  <input required name="uri" [(ngModel)]="data">
  <button [disabled]="!f.valid">Submut</button>
</form>
...