Ich muss dem eckigen Formular eine Validierung hinzufügen, um sicherzustellen, dass der Benutzer das Formular nicht leer für den Bearbeitungsvorgang gesendet hat. Ich habe formBuilder nicht verwendet und hoffe, eine Lösung ohne formBuilder oder formgroup zu finden. Mein HTML-Code lautet:

<div class="container p-0">
 <div class="row justify-content-center">
    <div class="col-lg-10">
        <div class="card" *ngIf="currentForm">
           <h4 class="card-header"> Edit Subscriber </h4>
            <div class="card-body">
                <form>
                    <div class="addForm">
                        <div class="form-group">
                            <label for="subscriberName">Subscriber Name</label>
                            <input type="text" id="subscriberName"  #subscriberName="ngModel" name="subscriberName"  [(ngModel)]="currentForm.subscribers.subscriber[0].subscriberName" class="form-control" required minlength="1" maxlength="100">
                            <div [hidden]="subscriberName.valid || subscriberName.pristine"
                            class="alert alert-danger"> Name is required</div>
                        </div>
                        <div class="button">
                        <button type="submit" routerLink="/viewsubscriber" class="btn btn-primary (click)="onSubmit()">Update</button> </div>
                </form>
            </div>
        </div>
    </div>
</div>
   onSubmit() {
    this.submitted = true;
      let requestBody={subscriberName: this.currentForm.subscribers.subscriber[0].subscriberName }
      console.log(requestBody); 
    this.userService.editSubscriber(this.currentForm.subscribers.subscriber[0].subscriberId,requestBody)
      .subscribe(
        _response =>  {  const confirmDialog = this.dialog.open(ConfirmDialogComponent, {
          data: {
            title: 'info',
            message: 'subscriber edited successfuly ' 
          }
        });
1
Asma Alghamdi 7 Okt. 2020 im 11:15

2 Antworten

Beste Antwort

Fügen Sie einfach eine if Bedingung in Ihre onSubmit Methode ein.

    onSubmit() {
        if (!this.currentForm.subscribers.subscriber[0].subscriberName) {
            console.log('name required');
            return false;
            }
            this.submitted = true;
              let requestBody={subscriberName: this.currentForm.subscribers.subscriber[0].subscriberName }
              console.log(requestBody); 
            this.userService.editSubscriber(this.currentForm.subscribers.subscriber[0].subscriberId,requestBody)
              .subscribe(
                _response =>  {  const confirmDialog = this.dialog.open(ConfirmDialogComponent, {
                  data: {
                    title: 'info',
                    message: 'subscriber edited successfuly ' 
                  }
                });
               }
0
Farhat Zaman 7 Okt. 2020 im 09:29

Wenn für Ihr Formular Steuerelemente erforderlich sind, können Sie mit der Eigenschaft valid des Formulars überprüfen, ob alles korrekt ist. Fügen Sie [disabled]="!currentForm.valid" wie unten gezeigt zu Ihrer Senden-Schaltfläche hinzu:

<button routerLink="/viewsubscriber" class="btn btn-primary [disabled]="!currentForm.valid">
    Update
</button>

Fügen Sie außerdem [formGroup]="currentForm" und (ngSubmit)="onSubmit()" in das Tag <form> ein und entfernen Sie das Ereignis (click) von Ihrer Senden-Schaltfläche.

0
Faisal 7 Okt. 2020 im 08:24