Question

即使必填字段为空，也会保存表单详细信息。我尝试禁用按钮，但无济于事。

这是我的源代码

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>

TypeScript

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

如何以这样的方式验证表单，即在必填字段不为空白之前，它不会不保存表单详细信息？

Answer 1

您可以在表单中使用验证器，如下所示：

 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>

Answer 2

因为您的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">

使用ngsubmit =“ onSubmit（）”的Angular 6表单

2 个答案: