如何解决Angular Form Validation 仅在输入时有效,然后删除
我希望表单的提交按钮在没有输入时为空白。但我的问题是提交时只留下空白,当你输入时,而不是删除它。
<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"
出现问题是因为表单在被触摸之前应该有效。
,所以我遇到这个问题的原因是因为我的 Formbuilder 打字稿代码设置错误。
我所拥有的:
public resourceForm = this.formBuilder.group({
title : [['',Validators.required]],link : [['',]],description : [['',});
什么是对的:
public resourceForm = this.formBuilder.group({
title : ['',[Validators.required]],link : ['',[]],description : ['',});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。