others - 在 Angular 7中如何禁用按钮

我有一个 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 有任何错误,请保持禁用&禁用。

谢谢!

时间:

你需要检查表单是否为 valid


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



Angular 被动形式

你需要使用三元运算符作为禁用接受 truenull 才能正常工作

所以你可以尝试

<button 


 type="button" 


 class="btn btn-primary" 


 [disabled]="jobTitle.errors.required? true: null"


 (click)="submit(jobTitle,jobDesc)">


 Create


</button>



只需让按钮依赖表单的有效性。

这将处理错误和原始( 初始) 条件。

例如:


<button type="button" class="btn btn-primary" [disabled]="!jobForm.valid"


(click)="submit(jobTitle,jobDesc)">Create</button>



请尝试以下代码:


<button type="button" class="btn btn-primary" [disabled]="jobForm.form.invalid"


(click)="submit(jobTitle,jobDesc)">Create</button>



你必须检查表单是否有效或是否有效。


<form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>


 <input required name="uri" [(ngModel)]="data">


 <button [disabled]="!f.valid">Submut</button>


</form>



...