【问题标题】：How to disable button in angular 7如何在角度 7 中禁用按钮
【发布时间】：2019-09-12 07:12:51
【问题描述】：

我有一个 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>

组件.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 有任何错误，请保持按钮禁用和初始禁用。

谢谢！

【问题讨论】：

试试[disabled]="!jobForm.valid"
Angular2 Forms - Submit Button Disabled?的可能重复

标签： angular angular7 angular-reactive-forms angular-validation

【解决方案1】：

您需要检查表单是否为valid。

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

Angular Reactive Forms

【讨论】：

【解决方案2】：

您需要使用三元运算符，因为 disabled 接受 true 和 null 才能正常工作

所以你可以试试

<button 
   type="button" 
   class="btn btn-primary" 
   [disabled]="jobTitle.errors.required? true: null"
   (click)="submit(jobTitle,jobDesc)">
      Create
</button>

【讨论】：

【解决方案3】：

试试这个代码：

<button type="button" class="btn btn-primary" [disabled]="jobForm.form.invalid"
(click)="submit(jobTitle,jobDesc)">Create</button>

【讨论】：

【解决方案4】：

您必须检查表格是否有效。

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

【讨论】：

避免发布仅代码的答案，edit 你的答案并添加一些解释你的代码如何解决问题

【解决方案5】：

只要让按钮依赖表单的有效性即可。

这将处理错误以及原始（初始）条件。

例子：

<button type="button" class="btn btn-primary" [disabled]="!jobForm.valid"
(click)="submit(jobTitle,jobDesc)">Create</button>

【讨论】：