社区首页 >问答首页 >formly表单输入和标签可以互换吗?

formly表单输入和标签可以互换吗?
EN

Stack Overflow用户
提问于 2019-07-11 13:26:59
回答 1查看 212关注 0票数 0

当输入处于焦点时,我想以form的标签为目标,但是因为form首先生成标签,所以我不能使用同级选择器.form-control + label

有没有办法交换它们,这样我们就可以得到像这样的东西

代码语言:javascript
代码运行次数:0
复制
<div>
  <input class="form-control ng-pristine ng-untouched ng-valid ng-empty ng-valid-maxlength"
         ng-model="model[options.key]" id="vm.form_input_vehicleRegistration_0" 
         name="vm.form_input_vehicleRegistration_0" formly-custom-validation="" 
         maxlength="20" type="text">
  <label for="vm.form_input_vehicleRegistration_0" class="control-label " ng-if="to.label">
    Registration
  </label>
</div>
EN

回答 1

Stack Overflow用户

发布于 2019-08-07 07:14:04

是的,您可以编写自定义输入控件

代码语言:javascript
代码运行次数:0
复制
import { Component } from '@angular/core';
import { FieldType } from '@ngx-formly/core';

@Component({
 selector: 'formly-field-input',
 template: `
   <div>
  <input class="form-control ng-pristine ng-untouched ng-valid ng-empty ng-valid-maxlength"
         ng-model="model[options.key]" id="vm.form_input_vehicleRegistration_0" 
         name="vm.form_input_vehicleRegistration_0" formly-custom-validation="" 
         maxlength="20" type="text">
  <label for="vm.form_input_vehicleRegistration_0" class="control-label " ng-if="to.label">
    Registration
  </label>
</div>
 `,
})
export class FormlyFieldInput extends FieldType {}

Example

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56990342

复制
相关文章
HTML 表单和输入
表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
用户8442333
2021/08/21
2K0
6.HTML输入表单标签元素介绍
描述: 表单是一个包含表单元素的区域,表单元素是允许用户在表单中输入内容,其包含 文本框、文本域(textarea)、按钮、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等元素都要放在form标签里面或者进行form的id值的调用,否则提交的数据到不了后端。
全栈工程师修炼指南
2023/03/21
4.6K0
【HTML5】HTML5 新增 input 表单 ( 邮箱输入表单 | 网址输入表单 | 日期输入表单 | 时间输入表单 | 电话输入表单 | 搜索栏输入表单 | 颜色选择器输入表单 )
一、HTML5 新增 input 表单 ---- HTML5 新增 input 表单 : 邮箱输入表单 : 必须输入邮箱 , 如果输入格式错误 , 提交时会在对话框中报错 ; <input type="email" /> URL 输入表单 : 只能输入网址 , 格式错误会在对话框中报错 ; <input type="url" /> 日期输入表单 : 右侧的下拉菜单选择日期 ; 如果在手机中打开 , 会弹出手机中自带的日期选择对话框 ; <input type="date" /> 时间输入表
韩曙亮
2023/04/24
3.4K0
【HTML5】HTML5 新增 input 表单 ( 邮箱输入表单 | 网址输入表单 | 日期输入表单 | 时间输入表单 | 电话输入表单 | 搜索栏输入表单 | 颜色选择器输入表单 )
多媒体视频标签和表单标签
<video src="./media/video.mp4" controls="controls"></video>
Qwe7
2022/05/21
4670
Flask-3 表单和输入验证
flask-wtf是一个表单集成插件,包括CSRF,文件上传和Recaptcha集成等。
XXXX-user
2019/07/23
1.7K0
Flask-3 表单和输入验证
【网页前端】HTML基本语法之排版标签和表单标签
                1.2.5 按钮标签: button (扩展-了解)
陶然同学
2023/02/27
1.1K0
【网页前端】HTML基本语法之排版标签和表单标签
python tkinter输入表单
""" use StringVar variables lay out by columns: this might not align horizontally everywhere (see entry2) """
用户5760343
2022/05/13
1.2K0
Vue表单输入绑定
  表单控件的数据绑定就是用v-model指令实现的,它会根据控件类型自动选取正确的方法更新元素。由于表单控件有不同的类型,如文本输入框、复选框、单选按钮、选择框等,v-model指令在不同的表单控件上应用时也会有所差异。
别团等shy哥发育
2023/02/25
7.3K0
Vue表单输入绑定
HTML基础——表单标签
1. 表单的介绍 表单用于搜集不同类型的用户输入(用户输入的数据),然后可以把用户数据提交到web服务器 。 2. 表单相关标签的使用 <form>标签 表示表单标签,定义整体的表单区域 <label>标签 表示表单元素的文字标注标签,定义文字标注 <input>标签 表示表单元素的用户输入标签,定义不同类型的用户输入数据方式 type属性 type="text" 定义单行文本输入框 type="password" 定义密码输入框 type="radio" 定义单选框 type="checkbox" 定
落雨
2022/06/02
5.9K0
bootstrap 禁止输入表单
<form class="form-horizontal" role="form"> <fieldset disabled> <div class="form-group"> <label for="disabledTextInput" class="col-sm-2 control-label">禁用输入(Fieldset disabled)</label> <div class="col-sm-10"> <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入"> </div> </div> <div class="form-group"> <label for="disabledSelect" class="col-sm-2 control-label">禁用选择菜单(Fieldset disabled)</label> <div class="col-sm-10"> <select id="disabledSelect" class="form-control"> <option>禁止选择</option> </select> </div> </div> </fieldset> </form>
用户5760343
2019/07/07
1.7K0
【HTML】HTML 表单 ③ ( label 标签 | 增大表单触发面积 | label 标签包含表单 | 通过 label 标签的 for 属性控制触发表单 )
label 标签 不属于表单 , 但是 经常与 表单 input 标签 一起使用 ;
韩曙亮
2023/03/30
3.6K0
【HTML】HTML 表单 ③ ( label 标签 | 增大表单触发面积 | label 标签包含表单 | 通过 label 标签的 for 属性控制触发表单 )
html表单提交_html表单标签有哪些
name属性 设置表单元素的名称,该名称是提交数据时的参数名 value属性 设置表单元素的值,该值是提交数据时参数名所对应的值
全栈程序员站长
2022/11/09
2.8K0
WordPress 标签的固定链接可以使用 ID 吗?
如果标签没有设置别名,那么固定链接就会带有中文,然后被 urlencode 转义成下面的字符串:
Denis
2023/04/13
1.3K0
WordPress 标签的固定链接可以使用 ID 吗?
React处理多表单输入
明知山
2023/07/24
1520
[python从入门到放弃]用pyautogui批量输入表单
STEP2:安装pyautogui,命令行输入pip install pyautogui
周星星9527
2019/08/06
1.7K0
Vue 3 表单输入绑定
你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。
公众号---人生代码
2020/11/03
2.1K0
Vue 3 表单输入绑定
十五、Vue表单输入绑定
十五、Vue表单输入绑定
Java架构师必看
2021/05/14
1.3K0
十五、Vue表单输入绑定
自举电路可以增加输入阻抗,你知道吗?
https://www.dianyuan.com/eestar/article-2127.html
工程师看海
2022/06/23
5280
自举电路可以增加输入阻抗,你知道吗?
表单输入框聚焦效果
css 代码,当然你使用类选择器也是可以的,这里我使用了 css 的属性选择器 关于选择器的优先级,可自行尝试测试:
itclanCoder
2020/10/28
1.5K0
表单输入框聚焦效果
注册页面案例_表单标签
注册页面案例_表单标签 效果如下: 示例代码如下: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <
黑泽君
2018/10/11
1.2K0
注册页面案例_表单标签

相似问题

输入type=“提交”Vs按钮标签,它们可以互换吗?

915

===和!=可以互换使用吗?

21

compact()和with()可以互换吗?

116

<?>和<E>可以互换吗?

41

“返回”和“返回”可以互换吗?

30
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档