wake-up-neo.com

So deaktivieren Sie die Schaltfläche in angular 7

Ich habe ein Angular7 app & using Reactive Forms Module zur Validierung & Formulare.

so sieht meine Vorlage aus.

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

}}

Es gibt solche 2-3 Eingabeelemente, die validiert sind.

Wie kann ich die Übermittlung deaktivieren, wenn eine der Überprüfungen fehlerhaft ist? Ich möchte nicht wie bei einer Immobilie eins nach dem anderen gehen.

Ich meine, wenn formError einen Fehler hat, lassen Sie die Schaltfläche deaktivieren und zunächst deaktivieren.

Vielen Dank!

angularangular7angular-reactive-formsangular-validation
5
Kgn-web

Sie müssen überprüfen, ob das Formular gültig ist oder nicht.

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

Sie müssen den ternären Operator verwenden, da deaktiviert true und null akzeptiert, um ordnungsgemäß zu funktionieren

Also kannst du es versuchen

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

Stellen Sie einfach sicher, dass die Schaltfläche von der Gültigkeit des Formulars abhängt.

Dies behebt Fehler sowie makellose (Ausgangs-) Zustände.

Beispiel:

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