Angular ngForm无效时禁用按钮
我有一个添加模式,我需要保存按钮被禁用,直到内容填写完毕。当内容被填满时,按钮应该被启用。这是我的代码Angular ngForm无效时禁用按钮,angular,angular2-forms,Angular,Angular2 Forms,我有一个添加模式,我需要保存按钮被禁用,直到内容填写完毕。当内容被填满时,按钮应该被启用。这是我的代码 <div bsModal #editModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> <div class="modal-dialog modal-md"> <div
<div bsModal #editModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-md">
<div class="modal-content">
<form name='groupForm' #groupForm="ngForm" novalidate>
<div class="modal-header">
<h4 class="modal-title wd-title-popup">Add Access Group</h4>
</div>
<div class="modal-body row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 accssContent paddingLeftClass">
<md-input-container style='width: 100%;margin-bottom: 6px !important;'>
<input type="textbox" mdInput name="admin" [(ngModel)]="group.groupName" placeholder="Access Group Name" required>
</md-input-container>
</div>
</div>
<div md-theme="reports" class="modal-footer" style="text-align: center;">
<div layout-align="end center" layout="row">
<button md-raised-button class="md-raised color-white" (click)="editModal.hide()" style="width: 45%;margin: 10px 5px;background-color: #FF5252;">Cancel</button>
<button md-raised-button class="md-raised color-white" [disabled]="!groupForm.form.valid" (click)="accessGroup(group)" style="width: 45%;margin: 10px 5px;background-color:#58B6A2;">Save</button>
</div>
</div>
</form>
</div>
</div>
添加访问组
取消
拯救
这同样适用于其他按钮。我在这里做错了什么?您的表单有
novalidate
,这可能会导致表单跳过验证,并且没有设置有效变量请尝试使用invalid
属性。更改如下:
<button md-raised-button class="md-raised color-white"
(click)="accessGroup(group)"
[disabled]="groupForm.invalid">Save</button>
保存
链接到。添加到表单
[formGroup]=“myForm”
打开,然后在禁用的[disabled]=“!myForm.valid”
中。表单中还有novalidate
属性,用于禁用浏览器的本机表单验证。我在[disabled]中删除了表单,但它不起作用。请注意,现在单个输入位于表单元素中。元素中的novalidate属性阻止浏览器尝试本机HTML验证。
请阅读此处: