vueform表单整体禁用
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vueform表单整体禁用相关的知识,希望对你有一定的参考价值。
参考技术A 目前的想法是用 vue 将 input 封装成一个组件,label 可以通过 props 传进去,但是这个 v-model 确是不知道应该怎么传进去了!关于bootstrap--表单控件(disabled表单禁用显示表单验证的样式)
1、disabled:
(1)在input中加入disabled可使表单禁用,如图:
<input class="form-control input-lg" id="disabledInput" type="text" placeholder="表单已被禁用,不可输入" disabled></div>
(2)如果fieldset设置了disabled属性,整个域都将处于被禁用状态,如图:
<fieldset disabled> <div class="form-group"> <label for="disabledTextInput">禁用的输入框</label> <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入"> </div> <div class="form-group"> <label for="disabledSelect">禁用的下拉框</label> <select id="disabledSelect" class="form-control"> <option>不可选择</option> </select> </div> </fieldset>
2、legend:如果legend中有输入框的话,这个输入框是无法被禁用的,如图:
<legend><input type="text" class="form-control" placeholder="显然我颜色变灰了,但是我没被禁用,不信?单击试一下" /></legend>
3、表单验证状态:加上has-feedback,并且加一个
<span class="glyphiconglyphicon-ok form-control-feedback"></span>
标签,才会出现小图标;在<input>下面加上<span class="help-block">来显示“你们输入的正确信息”。
<form role="form">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess1">成功状态</label>
<input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
<span class="help-block">你输入的信息是正确的</span>
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning1">警告状态</label>
<input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
<span class="help-block">请输入正确信息</span>
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError1">错误状态</label>
<input type="text" class="form-control" id="inputError1" placeholder="错误状态">
<span class="help-block">你是输入的信息是错误的</span>
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
</form>
以上是关于vueform表单整体禁用的主要内容,如果未能解决你的问题,请参考以下文章
启用/禁用表单控件触发 valueChanges Angular 2 Forms