檢查文本編輯器或主要 ng p 編輯器中的空白區域或僅空白區域

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