angular - Angular 表单验证仅在输入时有效,然后删除
问题描述
当没有输入时,我希望表单的提交按钮为空白。但是我的问题是,当您输入输入时,提交只是空白,而不是删除它。
<form [formGroup]="resourceForm" (ngSubmit)="createResource(title.value, link.value, description.value)">
<div class="form-group">
<div class="modal-body">
<label for="title">Titel</label>
<div class="input-group">
<input #title formControlName="title" type="text" class="form-control" id="title"
placeholder="Titel"
[class.is-invalid]="resourceForm.get('title').invalid && resourceForm.get('title').touched">
<div class="invalid-feedback">
Titel darf nicht leer sein
</div>
</div>
<label for="link">Link (Optional)</label>
<input #link type="text" formControlName="link" class="form-control" id="link" placeholder="Link">
<label for="description">Beschreibung</label>
<div class="input-group">
<textarea #description formControlName="description" type="text" class="form-control"
id="description"
[class.is-invalid]="resourceForm.get('description').invalid && resourceForm.get('description').touched"
placeholder="Beschreibung"></textarea>
<div class="invalid-feedback">
Beschreibung darf nicht leer sein
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal" type="submit"
[disabled]="!resourceForm.valid">Hinzufügen</button>
</div>
</div>
</form>
解决方案
我不完全推荐这个,但这应该做你想要的:
而不是[disabled]="!resourceForm.valid"
做:
[disabled]="!resourceForm.touched || !resourceForm.valid"
出现问题是因为表单在被触摸之前应该是有效的。
推荐阅读
- ssl - 从启用 SSL 的远程服务器连接到 cassandra cqlsh
- php - 如果在新类别中,则显示新徽章 Woocommerce
- powershell - Compare-Object PowerShell 输出一个 1KB 的文件,其中包含 2 个空行
- javascript - Cheerio - 查找并打印与查询匹配的所有属性
- python - 在关闭对话框之前添加验证
- python - Python 乌龟井字游戏
- python - 如何计算结果发生了多少次?
- javascript - 如何为 Redux 中的一组组合 reducer 制定规则?
- linux - 如何正确配置 Beaglebone Black PWM
- ethernet - 如何在 Rockwell ControlLogix 上进行故障排除和减少通信开销