Angular 反應式表單無效時提交

Question

我在 Angular 應用程序中有一個反應形式。 問題是每當我嘗試提交無效表單時，表單都會提交（頁面刷新；我在數據庫中看不到任何內容；我認為這只是行為）。

我希望頁面不刷新並使用我的 function 顯示所有無效字段。 下面是我的一段代碼。

<form class="form-signup" [formGroup]="newCustomerForm" (ngSubmit)="validateAllFormFields() && newCustomerForm.valid && registerNewMember()">

<! I am unbale to deactivate this button when form is invalid-->
<button type="submit" class="btn-signup" [disable]="form.invalid">Sign Up</button>
</form>

//function which makes all fields touched.

public validateAllFormFields(formGroup: FormGroup): boolean {
    Object.keys(formGroup.controls).forEach(field => {
      const control = formGroup.get(field);

      if (control instanceof FormControl) {
        control.markAsTouched({ onlySelf: true });
      }
      else if (control instanceof FormGroup) {
        this.validateAllFormFields(control);
      }
    });

    return true;
  }

Answer 1

在此示例中，僅當表單有效（[disabled]=".form,valid"）時才會啟用提交按鈕。 意味着必須通知用戶名（並且還必須是有效的用戶名）。

form: FormGroup;
onSubmit()
{
this.form=this.fb.group({
    UserName:['',[Validators.required,Validators.minLength(4)]]
})
}

<form class="form-horizontal" [formGroup]="form">
 <div class="form-group required">
          <label id="label">Username</label>
          <input class="form-control" id="username" formControlName="UserName">
          <div><div *ngIf="service.Name && service.Name.invalid && (service.Name.dirty || service.Name.touched)"
            class="alert alert-danger">
            <div *ngIf="service.Name && service.Name.errors?.required" >
                User Name is required
              </div>
              <div *ngIf="service.Name && service.Name.errors?.minlength">
                Minimum 4 characters required
              </div>
          </div></div>
         </div>
<div class="form-group col-md-8 offset-md-2">
            <button type="submit" class="btn btn-primary btn-block" [disabled]="!form.valid">Submit<button>
          </div>

Answer 2

你的表單變量名是什么？ 它是newCustomerForm還是只是form ？

此外，您編寫了 [ disable ]="form.invalid" 而不是 [ disabled ]="newCustomerForm.invalid"。 （如果您的表單名稱是 newCustomerForm）

<form class="form-signup" [formGroup]="newCustomerForm" (ngSubmit)="validateAllFormFields() && newCustomerForm.valid && registerNewMember()">
     <button type="submit" class="btn-signup" [disable]="newCustomerForm.invalid">Sign Up</button>
</form>