检查文本编辑器或prime ng p-editor中的空格或仅空格

Question

提交表单数据时，文本编辑器正文不应为空或为空。 用户应该不能提交空格或空数据。

如何处理这种情况（检查noticeText变量请求）。

以下请求正文/数据：

示例 1：

noticeText: <p><span class="ql-size-huge"> </span></p>

示例 2：

noticeText: <p> </p>

示例 3：

noticeText: <p><strong class="ql-size-huge"><em> </em></strong></p>

HTML：

    <form [formGroup]="addNoticeForm" (ngSubmit)="onSubmit()">     
        <div class="p-fluid p-formgrid p-grid">
            <div class="p-field p-col-12 p-md-6 p-lg-4 p-xl-3">
                <label for="companyRole">Company Role<span class="mandatory">*</span></label>
                <p-multiSelect [class.view-disable]="isViewDisable" placeholder="Select an option" formControlName="companyRole" [(ngModel)]="selectedCompanyRole" [options]="companyRoleOptions"
                        optionLabel="name" optionValue="code" appMultiSelection (onChange)="getSelectedRole(companyRole)"
                        [ngClass]="{ 'is-invalid': submitted && p.companyRole.errors?.error }"></p-multiSelect>
                        <div class="error-message" *ngIf="submitted && p.companyRole.errors && p.companyRole.errors?.error">
                            {{p.companyRole.errors?.error}}</div>
            </div>
            <div class="p-field p-col-12 p-md-6 p-lg-4 p-xl-3">
                <label for="user">Users<span class="mandatory">*</span></label>
                <p-multiSelect [class.view-disable]="isViewDisable" placeholder="Select an option" formControlName="user" [(ngModel)]="selecteduser" [options]="userOptions"
                        optionLabel="name" optionValue="code" [ngClass]="{ 'is-invalid': submitted && p.user.errors?.error }" appMultiSelection></p-multiSelect>
                <div class="error-message" *ngIf="submitted && p.user.errors && p.user.errors?.error">
                    {{p.user.errors?.error}}</div>
            </div>
            <div class="p-field p-col-12 p-md-6 p-lg-4 p-xl-3">
                <label for="noticeType">Notice type<span class="mandatory">*</span></label>
                <p-dropdown [disabled]="isViewDisable" placeholder="Select an option" formControlName="noticeType" [(ngModel)]="selectedNoticeType" [options]="noticeTypeOptions"
                [ngClass]="{ 'is-invalid': submitted && p.noticeType.errors }" optionLabel="name" optionValue="code" appSingleSelection></p-dropdown>
                        <div class="error-message" *ngIf="submitted && p.noticeType.errors && p.noticeType.errors?.error">
                            {{p.noticeType.errors?.error}}</div>
            </div>
            <div class="p-field p-col-12 p-md-6 p-lg-4 p-xl-3">
                <label for="noticeStartDate">Notice Start Date<span class="mandatory">*</span></label>                    
                <p-calendar [disabled]="isViewDisable" dateFormat="mm-dd-yy" [minDate]="minimumDate" [showIcon]="true" inputId="icon"
                formControlName="noticeStartDate" [(ngModel)]="noticeStartDate"
                [ngClass]="{ 'is-invalid': submitted && p.noticeStartDate.errors }" appDateSelection
                placeholder="Select the date">
            </p-calendar>
            <div class="error-message" *ngIf="submitted && p.noticeStartDate.errors && p.noticeStartDate.errors?.error">
                {{p.noticeStartDate.errors?.error}}</div>
                
            </div>
            <div class="p-field p-col-12 p-md-12">
                <label for="notice">Notice<span class="mandatory">*</span></label>
                <p-editor [readonly]="isViewDisable" formControlName="noticeText" [(ngModel)]="noticeText" [style]="{'height':'320px'}"  [ngClass]="{ 'is-invalid': submitted && p.noticeText.errors }" #editor appRequired>
                    <ng-template pTemplate="header">
                        <span class="ql-formats">
                            <select class="ql-size">
                                <option value="small"></option>
                                <option selected></option>
                                <option value="large"></option>
                                <option value="huge"></option>
                              </select>
                            <button class="ql-bold" aria-label="Bold"></button>
                            <button class="ql-italic" aria-label="Italic"></button>
                            <button class="ql-underline" aria-label="Underline"></button>
                            <span class="ql-formats">
                                <button class="ql-list" value="ordered"></button>
                                <button class="ql-list" value="bullet"></button>                                    <select title="Text Alignment" class="ql-align" >
                                  <option selected>Gauche</option>
                                  <option value="center" label="Center"></option>
                                  <option value="right" label="Right"></option>
                                  <option value="justify" label="Justify"></option>
                                </select>            
                              </span>
                              <span class="ql-formats">
                                <button class="ql-link" aria-label="Link"></button>
                              </span>
                          </span>
                    </ng-template>

                </p-editor>
                <div class="error-message" *ngIf="submitted && p.noticeText.errors && p.noticeText.errors?.error">
                            {{p.noticeText.errors?.error}}</div>
            </div>
            <div class="p-field p-col-12 p-md-12">
                <label>Attachment with Notice</label>
                <p-fileUpload class="notice-upload" [disabled]="isViewDisable" accept="image/png, image/jpeg, .doc, .docx, application/msword, .pdf, application/vnd.ms-excel"  multiple="true" fileLimit="5" #fileInput name="noticeAttachement[]" (change)="onFileSelect(fileInput)" [auto]="true" maxFileSize="2621440" chooseLabel="Choose File">
                </p-fileUpload>
                <p-table styleClass="p-datatable-sm p-datatable-gridlines common-datatable p-mt-2" #dt [autoLayout]="true">
                    <ng-template pTemplate="header">
                        <tr>
                            <th scope="col">File Name</th>
                            <th scope="col">Action</th>
                        </tr>
                    </ng-template>
                </p-table>
                <p-table styleClass="p-datatable-sm p-datatable-gridlines common-datatable" #dt [value]="namedetails"
                    [autoLayout]="true">                    
                    <ng-template pTemplate="body" let-rowData let-ri="rowIndex">
                        <tr>
                            <td> {{rowData.name}}</td>
                            <td><button pButton type="button" [disabled]="isViewDisable" icon="pi pi-times"
                                    class="ui-button-danger p-button-primary remove-button" (click)="deleteFile(ri, rowData.fileCode)"></button>
                            </td>
                        </tr>
                    </ng-template>
                </p-table>
                <p-table styleClass="p-datatable-sm p-datatable-gridlines common-datatable" #dt [value]="storeKmlFile"
                    [autoLayout]="true">
                    <ng-template pTemplate="body" let-rowData let-ri="rowIndex">
                        <tr>
                            <td> {{rowData.name}}</td>
                            <td><button pButton type="button" [disabled]="isViewDisable" icon="pi pi-times"
                                    class="ui-button-danger p-button-primary remove-button" (click)="removeEditFile(rowData)"></button>
                            </td>
                        </tr>
                    </ng-template>
                </p-table>
            </div>                
        </div>
  
        <div class="clearfix button-area">
            <button pButton pRipple type="button" label="Cancel" *ngIf="!isViewDisable" class="p-button p-button-secondary" routerLink="/notice-management/list-notices"></button>
            <button pButton pRipple type="submit" label="Submit" *ngIf="!isViewDisable" class="p-button p-button-primary"></button>
        </div>
        <div class="clearfix button-area" *ngIf="isViewDisable">
            <button pButton pRipple type="button" label="Back" *ngIf="isViewDisable" routerLink="/notice-management/list-notices"
                class="p-button p-button-secondary"></button>
        </div>
    </form>

TS：

onSubmit() {
    this.submitted = true;
    if (this.addNoticeForm.valid) {
      const formData = new FormData();
      if (this.storeKmlFile) {
        for (var i = 0; i < this.storeKmlFile.length; i++) {
          formData.append('noticeAttachement', this.storeKmlFile[i]);
        }
      }
      if (this.mode === 'create') {
        delete this.noticeModel['companyRole'];
      }
      this.fileCodeValue = 0;
      formData.append('user', this.selecteduser.toString());
      formData.append('noticeType', this.selectedNoticeType.toString());
      formData.append('noticeStartDate', moment(this.noticeStartDate).format("MM-DD-YYYY"));
      formData.append('noticeText', this.noticeText);
      formData.append('noticeCode', this.noticeCode);
      if (!this.storeKmlFile) {
          formData.append('noticeAttachement', "");
      }
      if (this.mode === 'edit') {
        for (let i in this.fileCodes) {
          formData.append('fileCode', this.fileCodes[i].toString());
          }
      }
      this.noticeService.addNotice(ConstUrls.NoticeManagement.AddNotice, formData, this.mode).subscribe((data: any) => {
          if (data.isSuccessful === true) {
            this.displayModal = true;
            this.showError = false;
            let buttonData = this.buttonData;
            this.modalService.success(data.message[0].message, buttonData);
          } else if (data.isSuccessful === false) {
            this.message = [{ field: "", message: data.message[0].message}];
            this.objError = this.message;
            this.showError = true;
            window.scrollTo({ top: 0, behavior: 'smooth' });
          }
        }, (error) => {
            this.message = [{ field: "", message: "error"}];
            this.objError = this.message;
            this.showError = true;
            window.scrollTo({ top: 0, behavior: 'smooth' });
        });
    }
     else {
      this.showError = false;
      this.scrollToErrorField();
    }
  }

注意： 在提交之前我们需要检查天气编辑器是否为空白。如果它不是空白或空的，我们应该继续提交数据。

Answer 1

一个简单的方法是创建一个辅助函数来检查当前字符串是否为空。您也可以尝试其他方法，例如创建指令或管道来验证用户输入的字符串。

const validateEmptyString = (value: string) => {
   if (!value) return true;
}

将此方法添加到 TS 文件中，并通过此传递所有字符串形式的值。我认为您专门寻找文本编辑器，通过此方法传递其值并检查它是否通过验证。如果在这种情况下失败，失败将返回true，请不要提交表单，而是在表单中显示错误。

Answer 2

您可以使用下面的代码从 p-editor 获取纯文本并检查字符串是否仅包含空格，以便您使用此值并触发验证

<p-editor (onTextChange)="returnIsStingContainsOnlySpaces($event)" formControlName="noticeText" [(ngModel)]="noticeText" #editor>

returnIsStingContainsOnlySpaces(event){
  var text = event.textValue;
   
  if (!/\S/.test(text)) {
    this.invalidText= true;
  } else {
    this.invalidText = false;
  }
}