响应式表单

首先,要用到响应式表单,则需要在AppModule中手动引入,代码如下:

 

响应式表单中有三个类,用这几个类在ts文件中写好数据模型,再通过其中的指令把模型和布局文件关联上:

 

区分两种表单:

看指令,若是form开头的指令是响应式表单,若是以ng开头的指令是模板式表单。

且只有模板式表单中可以用模板本地变量(#name形式)

注意:

上图的指令中以name结尾的指令,在模板中进行属性绑定时,不用[ ]这样的形式,直接:formControlName = “angular haha”这样的形式即可。其他的指令则进行属性绑定时则需用[formControl] = "hahah"这样的形式。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
响应式表单是一种适应不同屏幕尺寸和设备类型的表单。下面是一个简单的响应式表单的HTML源码: ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>响应式表单</title> <style> /* 样式部分可以根据实际需要进行自定义调整 */ body { font-family: Arial, sans-serif; margin: 0; padding: 20px; } .form-group { margin-bottom: 20px; } label { display: block; margin-bottom: 5px; } input[type="text"], input[type="email"], select { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } button[type="submit"] { background-color: #4CAF50; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; } @media screen and (min-width: 600px) { /* 在大屏幕上进行调整 */ .form-group { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; } label { margin-bottom: 0; text-align: right; } input[type="text"], input[type="email"], select { width: 100%; } } </style> </head> <body> <h1>响应式表单</h1> <form> <div class="form-group"> <label for="name">姓名:</label> <input type="text" id="name" name="name" required> </div> <div class="form-group"> <label for="email">邮箱:</label> <input type="email" id="email" name="email" required> </div> <div class="form-group"> <label for="phone">电话:</label> <input type="text" id="phone" name="phone" required> </div> <div class="form-group"> <label for="message">消息:</label> <textarea id="message" name="message" rows="5" required></textarea> </div> <button type="submit">提交</button> </form> </body> </html> ``` 以上的HTML源码展示了一个简单的响应式表单。在小屏幕上,表单元素会保持100%宽度,依次排列。而在大屏幕上,表单元素会根据网格布局进行调整,每行两个表单元素。这样,无论用户使用何种设备访问页面,都能够正常显示和使用表单

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值