javascript - 如果没有输入任何输入(包括 Angular 中的空格字符)，如何禁用按钮

Question

我有一个简单的输入字段和 1 个保存按钮。如果输入字段为空，则按钮将被禁用。但在我的代码中，空格字符的行为就像普通字符一样，因此用户只需输入空格即可输入值。如何检查输入字段中至少存在 1 个字符？

代码:

<mat-form-field fxFlex="50">
            <input matInput name="postalAddress"
                   [(ngModel)]="employee.postalAddress" placeholder="Postal Address"
                   required>
</mat-form-field>

 <button type="button" id="save" class="button-style" (click)="onSaveOffice()"
                [disabled]="!employee.postalAddress" > Save
 </button>

注意:我在后面使用 typescript ，所以我需要在 typescript 代码中执行任何逻辑吗？

Answer 1

您可以在检查空性之前对字符串使用 trim() 方法，这样它将删除所有空格:

<mat-form-field fxFlex="50">
            <input matInput name="postalAddress"
                   [(ngModel)]="employee.postalAddress" placeholder="Postal Address"
                   required>
</mat-form-field>

 <button type="button" id="save" class="button-style" (click)="onSaveOffice()"
                [disabled]="!employee.postalAddress?.trim()" > Save
 </button>

希望有帮助。