Angular 6 Form с использованием ngsubmit = "onSubmit ()" - PullRequest
Новая
       11

Angular 6 Form с использованием ngsubmit = "onSubmit ()"

0 голосов
/ 09 сентября 2018

Даже если обязательные поля пусты, данные формы сохраняются. Я пытался отключить кнопку, но ничего не получалось.

Вот мой исходный код

HTML 

<form [formGroup]="userForm" (ngSubmit)="onSubmit()" #myForm="ngForm">
          <mat-form-field class="example-full-width" style="margin-left:20px">
            <input matInput placeholder="Full Name" formControlName="userName" name="userName" required>
            <mat-hint> eg:Harry Potter</mat-hint>
          </mat-form-field>
          <mat-form-field hintLabel="Max 10 characters" style="margin-left:20px">
            <input matInput #input maxlength="10" placeholder="Enter your phone number" formControlName="userPhone" name="userPhone"
              required>
            <mat-hint align="end">{{input.value?.length || 0}}/10</mat-hint>
          </mat-form-field>
          <br>
          <mat-form-field class="example-full-width" style="margin-left:20px">
            <input matInput placeholder="Email" [formControl]="userEmail" required="required">
            <mat-error *ngIf="userEmail.hasError('email') && !userEmail.hasError('required')">
              Please enter a valid email address
            </mat-error>
            <mat-error *ngIf="userEmail.hasError('required')">
              Email is <strong>required</strong>
            </mat-error>
          </mat-form-field>
          <mat-form-field class="example-full-width" style="margin-left:20px">
            <input matInput placeholder="Address" formControlName="userAddress" name="userAddType" required>
          </mat-form-field>
          <mat-form-field class="example-full-width" style="margin-left:20px">
            <input matInput placeholder="Type of address" formControlName="userAddType" name="userAddType">
            <mat-hint>eg: Home, Work</mat-hint>
          </mat-form-field>
          <br>
          <button style="background-color:darkorange;border-radius: 8px;height:50px;margin-left:60px">
            Save and Deliver</button>
        </form>

машинопись 

  onSubmit() {
    // console.log(this.userName.value);   
      this.add.name = this.userName.value;
      this.add.phone = this.userPhone.value;
      this.add.address = this.userAddress.value;
      this.add.email = this.userEmail.value;
      this.firebase.addAddress(this.add);
  }

Как я могу проверить форму таким образом, чтобы она не сохраняла детали формы до тех пор, пока обязательные поля не станут пустыми?

Ответы [ 2 ]

0 голосов
/ 07 мая 2019

Потому что ваш onSubmit не проверяет правильность вашей формы. он буквально сохраняет только данные.

Пожалуйста, проверьте, является ли ваша форма действительной или нет в onsubmit (). 

ex) formName.valid();  // this is for reactive form 
 onSubmit() {
        this.submitted = true;

        // stop here if form is invalid
        if (this.registerForm.invalid) {
            return;
        }

        alert('SUCCESS!! :-)')
    }

или добавьте этот вид проверки в ваш HTML-блок. https://angular.io/guide/form-validation

<div *ngIf="name.invalid && (name.dirty || name.touched)"
    class="alert alert-danger">
0 голосов
/ 09 сентября 2018

Вы можете использовать валидаторы в вашей форме, как показано ниже: 

 this.form= this.fb.group({
      name: new FormControl('', Validators.required),
      surname: new FormControl('', Validators.required),
      email: new FormControl('', Validators.required)
    });


и попробуйте отключить кнопку отправки, 

<div class="text-center">
        <button type="submit" [disabled]="!form.valid" class="btn btn-primary">Submit</button>
      </div>
...