在字段上添加验证以确保用户没有提交空表单

Question

我需要向 angular 表单添加验证以确保用户不会提交空表单进行编辑操作，我没有使用 formBuilder，我希望找到没有 formBuilder 或 formgroup 的解决方案。我的 html 代码是：

<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>

我的 ts 代码：

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

Answer 1

如果您的表单需要控件，那么您可以使用表单的 valid 属性检查是否一切正确。在您的提交按钮上添加 [disabled]="!currentForm.valid"，如下所示：

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

此外，将 [formGroup]="currentForm" 和 (ngSubmit)="onSubmit()" 放在 <form> 标签上，并从您的提交按钮中删除 (click) 事件。

Answer 2

只需在您的 onSubmit 方法中放置一个 if 条件即可。

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

在字段上添加验证以确保用户没有提交空表单

Adding validation on fields to make sure user does not submitted the form empty

forms

validation

edit

angular