检查文本编辑器或主要ng p编辑器中的空白或仅为空空间。
检查文本编辑器或主要ng p编辑器中的空白或仅为空空间。
提问于 2021-10-18 09:13:33
在提交表单数据时，文本编辑器主体不应为空白或空。用户不应能够提交空白或空数据。
如何处理这样的场景(检查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();
}
}注意:在提交之前，我们需要检查天气编辑器是否为空白。如果它不是空白或空的，我们应该继续提交数据。
回答 2
Stack Overflow用户
发布于 2021-10-19 08:06:13
一个简单的方法是创建一个助手函数，检查当前字符串是否为空。您也可以尝试其他方法，比如创建指令或管道来验证用户输入的字符串。
const validateEmptyString = (value: string) => {
if (!value) return true;
}将此方法添加到TS文件并传递所有字符串窗体值。我认为您专门寻找文本编辑器之一，通过这个方法传递它的值，并检查它是否通过验证。如果在这种情况下失败将返回true，则不要提交表单，而是在表单中显示错误。
Stack Overflow用户
发布于 2021-12-29 07:21:23
您可以使用下面的代码从p编辑器获取纯文本，并且只检查字符串包含空空格，从而使用此值并触发验证。
<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;
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69613546
复制相关文章
相似问题
腾讯云开发者
