响应式表单(表单修改未提交时，存储数据)

最新推荐文章于 2024-03-11 10:36:31 发布
最新推荐文章于 2024-03-11 10:36:31 发布
阅读量430 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44239362/article/details/105862677
版权

响应式表单

响应式表单：使用FormGroup, FormControl，FormArray,FormBuilder 等类构建出的数据对象就是响应式的表单，可动态删除或添加控件。
模板驱动表单：使用ngModel、ngForm进行双向绑定。

项目结构如图：
在这里插入图片描述
array-slave.component.html

<ng-container [formGroup]="validateForm">
    <button nbButton type="button" (click)="addSlave()" style="margin-left: 2rem;font-size: 13px;padding: 7px;background-color: royalblue ;border-color: royalblue;" translate>add slave</button>
    <button nbButton type="button" (click)="selectLanguage('zh-CN')" style="margin-left: 2rem;font-size: 13px;padding: 7px;background-color: saddlebrown ;border-color: saddlebrown;">中文简体</button>
    <button nbButton type="button" (click)="selectLanguage('en-US')" style="margin-left: 2rem;font-size: 13px;padding: 7px;background-color: saddlebrown ;border-color: saddlebrown;">English</button>
    <div formArrayName="slave" *ngFor="let slave of slave?.controls; let slaveIndex = index;">
        <ng-container [formGroupName]="slaveIndex"><br>
            <nb-accordion>
                <nb-accordion-item #item>
                    <nb-accordion-item-header><span translate>Slave</span>{{slaveIndex+1}}
                        <button nbButton type="button" (click)="removeSlave(slaveIndex)" style="margin-left: 2rem;font-size: 13px;padding: 7px;background-color: royalblue ;border-color: royalblue;" translate>remove slave</button>
                        <span *ngIf='val'>
                            <span style="margin: 0 2rem;" *ngIf='val[slaveIndex]' translate>Slave Connection<span>:{{val[slaveIndex]["SlaveConnection"]}}</span></span>
                            <span *ngIf='val[slaveIndex]' translate>Hw Id<span>:{{val[slaveIndex]["HwId"]}}</span></span>
                        </span>
                    </nb-accordion-item-header>
                    <nb-accordion-item-body>
                        <!-- SlaveConnection TcpPort -->
                        <div class="form-group row">
                            <label class="label col-sm-2 col-form-label" >{{ 'Slave Connection' | translate }}</label>
                            <div class="col-sm-4">
                                <input type="text" nbInput  fullWidth required formControlName="SlaveConnection" placeholder="<IPV4 address>"
                                pattern="^(25[0-5]|2[0-4]\d|[0-1]?\d?\d)(\.(25[0-5]|2[0-4]\d|[0-1]?\d?\d)){3}$">
                            </div>
                            <label class="label col-sm-2 col-form-label" translate>Tcp Port</label>
                            <div class="col-sm-2">
                                <input type="text" nbInput fullWidth formControlName="TcpPort">
                            </div>
                        </div>
                        <!-- RetryCount RetryInterval -->
                        <div class="form-group row">
                            <label class="label col-sm-2 col-form-label" translate>Retry Count</label>
                            <div class="col-sm-2">
                                <input type="text" nbInput fullWidth formControlName="RetryCount">
                            </div>
                            <div class="col-sm-2"></div>
                            <label class="label col-sm-2 col-form-label" translate>Retry Interval</label>
                            <div class="col-sm-2">
                                <input type="text" nbInput fullWidth formControlName="RetryInterval">
                            </div>
                        </div>
                        <!-- HwId -->
                        <div class="form-group row">
                            <label class="label col-sm-2 col-form-label" translate>Hw Id</label>
                            <div class="col-sm-5">
                                <input type="text" nbInput fullWidth required formControlName="HwId" placeholder="PowerMeter-0a:01:01:01:01:01">
                            </div>
                            <div class="col-sm-2">
                                <button nbButton type="button" (click)="addopItem(slaveIndex)" style="display: inline-block;margin-left: 2rem;font-size: 12px;padding: 6px;background-color: teal;border-color: teal;" translate>add operation</button>
                            </div>
                        </div>
                        <!-- Operations -->
                        <div formArrayName="Operations" *ngFor="let item of slave.get('Operations')?.controls; let opIndex = index;">
                            <ng-container [formGroupName]="opIndex">
                                <nb-accordion>
                                    <nb-accordion-item #item>
                                        <nb-accordion-item-header><span translate>Operation</span>{{opIndex+1}}
                                            <button nbButton type="button" (click)="removeopItem(slaveIndex,opIndex)" style="margin-left: 2rem;font-size: 12px;padding: 6px;background-color: teal;border-color: teal;" translate>remove operation</button>
                                        </nb-accordion-item-header>
                                        <nb-accordion-item-body>
                                            <!-- PollingInterval UnitId -->
                                            <div class="form-group row">
                                                <label class="label col-sm-2 col-form-label" translate>Polling Interval</label>
                                                <div class="col-sm-4">
                                                    <input type="text" nbInput fullWidth formControlName="PollingInterval">
                                                </div>
                                                <label class="label col-sm-2 col-form-label" translate>Unit Id</label>
                                                <div class="col-sm-4">
                                                    <input type="text" nbInput fullWidth formControlName="UnitId">
                                                </div>
                                            </div>
                                            <!-- StartAddress Count -->
                                            <div class="form-group row">
                                                <label class="label col-sm-2 col-form-label" translate>Start Address</label>
                                                <div class="col-sm-4">
                                                    <input type="text" nbInput fullWidth formControlName="StartAddress">
                                                </div>
                                                <label class="label col-sm-2 col-form-label" translate>Count</label>
                                                <div class="col-sm-4">
                                                    <input type="text" nbInput fullWidth formControlName="Count">
                                                </div>
                                            </div>
                                            <!-- CorrelationId DisplayName -->
                                            <div class="form-group row">
                                                <label class="label col-sm-2 col-form-label" translate>Correlation Id</label>
                                                <div class="col-sm-4">
                                                    <input type="text" nbInput fullWidth formControlName="CorrelationId">
                                                </div>
                                                <label class="label col-sm-2 col-form-label" translate>Display Name</label>
                                                <div class="col-sm-4">
                                                    <input type="text" nbInput fullWidth formControlName="DisplayName">
                                                </div>
                                            </div>
                                        </nb-accordion-item-body>
                                    </nb-accordion-item>
                                </nb-accordion>
                            </ng-container>
                        </div>
                    </nb-accordion-item-body>
                </nb-accordion-item>
            </nb-accordion>
        </ng-container>
    </div>
</ng-container><br>

array-slave.component.ts

import { Component, OnInit, Input,  } from "@angular/core";
import { FormBuilder, NgForm, FormArray, FormGroup, Validators } from "@angular/forms";
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'ngx-array-slave',
  templateUrl: './array-slave.component.html',
  styleUrls: ['./array-slave.component.scss'],
})
export class ArraySlaveComponent implements OnInit {
  @Input() name: string;
  @Input() form: NgForm; // 把父级的form拿到 用于插入这个父级form
  public validateForm : FormGroup;
  public data2:any;
  // 用于在html中显示slave connection及hw id
  public val:any;
  
  constructor(private fb: FormBuilder, public translate: TranslateService) {
    this.validateForm = this.fb.group({
      slave : this.fb.array([
        this.fb.group({
          SlaveConnection: ["", Validators.required],
          TcpPort: "502",
          RetryCount: "10",
          RetryInterval: "100",
          HwId: ["", Validators.required],
          Operations: this.fb.array([
            this.fb.group({
              PollingInterval: "",
              UnitId: "",
              StartAddress: "",
              Count: "",
              CorrelationId: "",
              DisplayName: "",
            })
          ]),
        })
      ])
    })
    
    // 表单数据发生变化时，将data赋值给data2(valueChanges只能写在constructor中)
    this.validateForm.valueChanges.subscribe(data=>{
      this.data2 = data;
      localStorage.setItem("slave",JSON.stringify(this.data2["slave"]));
    });
  }

  ngOnInit() {
    // 判断localstorage里是否有数据
    if(localStorage.getItem("slave")){
      var obj = localStorage.getItem('slave');
      var objs = JSON.parse(obj);
      this.val = objs;
      // console.log(obj);
      // 判断有几条slave，第一条赋值，后面的添加到表单中
      for(var i=0;i<objs.length;i++){
        if(i==0){
          this.slave.setValue([{
            SlaveConnection: objs[0]["SlaveConnection"],
            TcpPort: objs[0]["TcpPort"],
            RetryCount: objs[0]["RetryCount"],
            RetryInterval: objs[0]["RetryInterval"],
            HwId: objs[0]["HwId"],
            Operations: ([{
              PollingInterval: "",
              UnitId: "",
              StartAddress: "",
              Count: "",
              CorrelationId: "",
              DisplayName: "",
              }])
          }]);
          var ops = objs[i]["Operations"];
          if(ops.length > 0){
            for(var j=0;j<ops.length;j++){
              if(j==0){
                (this.slave.at(i).get('Operations') as FormArray).setValue([{
                      PollingInterval: ops[j]["PollingInterval"],
                      UnitId: ops[j]["UnitId"],
                      StartAddress: ops[j]["StartAddress"],
                      Count: ops[j]["Count"],
                      CorrelationId: ops[j]["CorrelationId"],
                      DisplayName: ops[j]["DisplayName"],
                }])
              }else{
                (this.slave.at(i).get('Operations') as FormArray).push(
                  this.fb.group({
                    PollingInterval: ops[j]["PollingInterval"],
                    UnitId: ops[j]["UnitId"],
                    StartAddress: ops[j]["StartAddress"],
                    Count: ops[j]["Count"],
                    CorrelationId: ops[j]["CorrelationId"],
                    DisplayName: ops[j]["DisplayName"],
                  })
                )
              }
            }
          }else{
            (this.slave.at(i).get('Operations') as FormArray).removeAt(0);
          }
        }else{
          this.slave.push(
            this.fb.group({
              SlaveConnection: objs[i]["SlaveConnection"],
              TcpPort: objs[i]["TcpPort"],
              RetryCount: objs[i]["RetryCount"],
              RetryInterval: objs[i]["RetryInterval"],
              HwId: objs[i]["HwId"],
              Operations: this.fb.array([
                this.fb.group({
                  PollingInterval: "",
                  UnitId: "",
                  StartAddress: "",
                  Count: "",
                  CorrelationId: "",
                  DisplayName: "",
                })
              ]),
            })
          );
          var ops = objs[i]["Operations"];
          if(ops.length > 0){
            for(var j=0;j<ops.length;j++){
              if(j==0){
                (this.slave.at(i).get('Operations') as FormArray).setValue([{
                      PollingInterval: ops[j]["PollingInterval"],
                      UnitId: ops[j]["UnitId"],
                      StartAddress: ops[j]["StartAddress"],
                      Count: ops[j]["Count"],
                      CorrelationId: ops[j]["CorrelationId"],
                      DisplayName: ops[j]["DisplayName"],
                }])
              }else{
                (this.slave.at(i).get('Operations') as FormArray).push(
                  this.fb.group({
                    PollingInterval: ops[j]["PollingInterval"],
                    UnitId: ops[j]["UnitId"],
                    StartAddress: ops[j]["StartAddress"],
                    Count: ops[j]["Count"],
                    CorrelationId: ops[j]["CorrelationId"],
                    DisplayName: ops[j]["DisplayName"],
                  })
                )
              }
            }
          }else{
            (this.slave.at(i).get('Operations') as FormArray).removeAt(0);
          }
        }
      }
    }
    // 将validateForm表单传给父级的form
    this.form.control.addControl(this.name, this.validateForm);
  }

  get slave() {
    return this.validateForm.get("slave") as FormArray;
  }
  // slave增加及删除
  addSlave(): void{
    this.slave.push(
      this.fb.group({
        SlaveConnection: ["", Validators.required],
        TcpPort: "502",
        RetryCount: "10",
        RetryInterval: "100",
        HwId: ["", Validators.required],
        Operations: this.fb.array([
          this.fb.group({
            PollingInterval: "",
            UnitId: "",
            StartAddress: "",
            Count: "",
            CorrelationId: "",
            DisplayName: "",
          })
        ]),
      })
    )
  }
  removeSlave(index: number) {
    this.slave.removeAt(index);
  }

  // op增加及删除
  addopItem(slaveIndex: number): void{
    (this.slave.at(slaveIndex).get('Operations') as FormArray).push(
      this.fb.group({
        PollingInterval: "",
        UnitId: "",
        StartAddress: "",
        Count: "",
        CorrelationId: "",
        DisplayName: "",
      })
    )
  }
  removeopItem(slaveIndex: number,opIndex: number) {
    (this.slave.at(slaveIndex).get('Operations') as FormArray).removeAt(opIndex);
  }

  // 设置语言
  public selectLanguage(lang) {
    this.translate.use(lang);
    // 更新当前记录的语言
    localStorage.setItem('currentLanguage', lang)
  }
}

array-slave.component.scss

nb-accordion{
    // 必须填写的样式
    // .ng-valid[required], .ng-valid.required{
    //     border-left: 5px solid #42a948;
    // }
    .ng-invalid:not(form){
        border-left: 5px solid #a94442;
    }
}

modbus.component.html

<div class="row">
    <div class="col-md-9">
        <nb-card>
            <nb-card-header>modbus协议</nb-card-header>
            <nb-card-body style="padding: 0.5rem;">
                <form novalidate style="margin-bottom: 1rem;" #slavesForm="ngForm">
                    <ngx-array-slave name="slaves" [form]="slavesForm"></ngx-array-slave>
                    <!-- 保存 -->
                    <button nbButton type="button" [disabled]="!slavesForm?.valid" (click)="onSubmit(slavesForm)" style="margin-left: 2rem;margin-top: 0.5rem;font-size: 13px;padding: 7px;" translate>submit</button>
                </form>
            </nb-card-body>
        </nb-card>
    </div>
</div>

modbus.component.ts

import { Component, OnInit, SimpleChanges } from '@angular/core';
import { NgForm } from '@angular/forms';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Component({
  selector: 'ngx-modbus',
  templateUrl: './modbus.component.html',
  styleUrls: ['./modbus.component.scss']
})
export class ModbusComponent implements OnInit {
  private SlaveConfigs;

  // get请求数据 - 获取数组中数据条数
  public list:any={};
  public num:any;
  constructor(public http:HttpClient) {
    let api = 'assets/admin-data/system-configuration.json';
    this.http.get(api).subscribe(resp =>{
      var propertiesdesired = resp['properties.desired'];
      this.SlaveConfigs = propertiesdesired["SlaveConfigs"];
      // 计算json数据中slave的个数
      var count=0;
      for(var key in this.SlaveConfigs){
          count++;
      }
      this.num = count;
      // console.log(this.num);
    });
  }

  ngOnInit() {
  }
  
  // 提交表单
  onSubmit(form: NgForm){
    // 获取表单数据
      const params = form.control.get('slaves').get('slave').value;
    // console.log(params);
    // 判断是否有slave
    if(params.length == 0){
      alert("您没有添加Slave");
    }
    // 判断是否已经提交了256条slave，如果num >= 256
    if(this.num >= 256){
      alert("您已添加256条Slave");
    }else{
      // 请求头
      const httpOptions = {
        headers: new HttpHeaders({
          'Content-Type':  'application/json',
        })
      };
      for(var i=0;i<params.length;i++){
        // post提交数据 - json-server建虚拟服务器环境
        let api = 'http://localhost:3000/properties.desired';

        // op01 op01...
        var Operations = {};
        var ops = params[i]["Operations"];
        var opNum = ops.length;
        for(var j=0; j<opNum; j++){
          let num2:any = j+1;
          if(num2 < 10){
            num2 = '0' + num2;
          }else{
            num2 = num2;
          }
          Operations["Op"+num2] = ops[j]
          // console.log(ops[j]);
        }
        // console.log(opNum, ops);
        params[i]["Operations"] = Operations;
        // console.log(this.Operations);

        this.num ++;
        // 改为slave01 02 03...格式
        if(this.num < 10){
          this.num = '0' + this.num;
        }else{
          this.num = this.num;
        }
        this.SlaveConfigs['Slave'+this.num] = params[i];
        // console.log(this.SlaveConfigs);
        this.http.patch(api, {"SlaveConfigs" : this.SlaveConfigs}, httpOptions).subscribe(resp =>{
        });
      }
      // 将localstorage中缓存的数据删除
      localStorage.removeItem("slave");
    }
  }
}

modbus.component.scss

nb-card{
    // 必须填写的样式
    // .ng-valid[required], .ng-valid.required{
    //     border-left: 5px solid #42a948;
    // }
    .ng-invalid:not(form){
        border-left: 5px solid #a94442;
    }

    // op1 op2样式
    .opStyle{
        font-weight: 600;
        display: inline-block;
        width: 100%;
        margin-bottom: 1.2rem;
        padding-bottom: 0.8rem;
        border-bottom: 1px solid #edf1f7;
    }
}
上传的数据在这里

使用json-server虚拟服务器

npm install -g json-server
json-server --watch modbus.json

modbus.json

{
  "properties.desired": {
    "PublishInterval": "5000",
    "Version": "1",
    "SlaveConfigs": {
    }
  }
}

国际化（i18n）

在项目的assets目录下新建i18n文件夹，如图：
在这里插入图片描述
en-US.json

{
    "Slave":"Slave",
    "add slave": "add slave",
    "remove slave": "remove slave",
    "Slave Connection": "Slave Connection",
    "Tcp Port": "Tcp Port",
    "Retry Count": "Retry Count",
    "Retry Interval": "Retry Interval",
    "Hw Id": "Hw Id",

    "Operation":"Operation",
    "add operation":"add operation",
    "remove operation":"remove operation",
    "Polling Interval": "Polling Interval",
    "Unit Id": "Unit Id",
    "Start Address": "Start Address",
    "Count": "Count",
    "Correlation Id": "Correlation Id",
    "Display Name": "Display Name",

    "submit":"submit"
}

zh-CN.json

{
    "Slave":"从机",
    "add slave": "添加从机",
    "remove slave": "移除从机",
    "Slave Connection": "从机连接",
    "Tcp Port": "tcp端口",
    "Retry Count": "重试计数",
    "Retry Interval": "重试间隔",
    "Hw Id": "硬件标识",

    "Operation":"操作",
    "add operation":"添加操作",
    "remove operation":"删除操作",
    "Polling Interval": "轮询间隔",
    "Unit Id": "单位编号",
    "Start Address": "起始地址",
    "Count": "总数",
    "Correlation Id": "关联ID",
    "Display Name": "显示名称",

    "submit":"提交"
}
效果

在这里插入图片描述

米芝芝
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
angular【响应式表单】和【模板式表单】校验器对比分析---angular总结
Stephanie翟倩
03-27 810
前言：什么是angular的校验器？校验器能够帮助我们实现什么功能？它又是怎样应用的？下面的文章中，将会和大家分享一下关于angular校验器的内容。 （一）校验器是什么 在我们注册一个邮箱的时候，我们需要输入用户名、密码、手机号、邮箱等内容。此时会出现，用户名没有输入，或者手机号位数不正确等内容。那么如何判这些内容呢，这时候就用到了校验器。通过校验器，可以帮助用户在登录的时候完成判断。 在Ang...
产品订单提交表单响应式网页模板
01-23
产品订单提交表单响应式网页模板是现代网页设计中常见的一种设计模式，它主要用于电子商务、在线销售和其他需要用户填写订单信息的网站。响应式设计意味着该模板能够自适应不同的设备屏幕，无论是桌面、平板还是手机...
响应式表单
Phoenix_99的专栏
10-13 104
reactiveform HTM:L <form [formGroup]="formModel" (submit)="onSubmit()"> <div> <input formControlName="username" type="text"> </div> <div formGroupName="dateRange"> 起始日期：<label> <input type="date" f
[Angular 基础] - 表单：响应式表单
最新发布
GoldenaArcher的博客
03-11 611
),}),});效果如下：，其原因是因为在调用了，因此需要绑定对应的 scope，否则 Angular 会因为this的指向变更而找不到。⚠️：这是 JavaScript 的问题，与框架无关这个实现和自定义验证类似，不过返回的对象是null,),}),});}, 1500);});效果如下：可以看到，当输入为时，又过了大概 1.5s 之后，输入框才跳为红色——这是之前加的出现 error 的 CSS。
红色资料提交表单响应式网页模板
01-22
【红色资料提交表单响应式网页模板】是一个专为在线数据收集设计的网页模板，它采用了醒目的红色调，以吸引用户的注意力，并确保表单填写的可见性和易用性。响应式设计是这个模板的核心特点，意味着无论用户使用桌面...
用户信息提交申请表单响应式网页模板
01-23
"html"文件很可能是模板的源代码，包含了HTML结构、CSS样式和可能的JavaScript代码，这些都是构建响应式表单页面的关键元素。 在实际应用中，开发者会根据业务需求对这个模板进行定制，可能涉及调整颜色方案、添加...
创意信息提交表单响应式网页模板
01-23
【创意信息提交表单响应式网页模板】是一个专为现代互联网设计的网页模板，它集成了创新的设计元素和功能，以适应不同设备的屏幕尺寸，确保用户在任何设备上都能获得一致的优质体验。响应式设计是现代网页设计的关键...
邮件订阅选项提交表单响应式网页模板
01-23
【邮件订阅选项提交表单响应式网页模板】是一种专门用于收集用户邮箱地址的网页设计，以便于企业或个人能够向订阅者发送新闻通讯、产品更新或其他相关信息。响应式设计意味着该模板可以自动适应不同设备的屏幕尺寸，...
HTML5超酷响应式表单美化模板插件
12-12
这是一款使用html5表单验证新属性制作的HTML5超酷响应式表单美化模板插件。该html5表单美化插件可以使用html5新特性栏验证表单，表单整体效果趋于扁平化风格，非常好看。
11.CSS响应式表单和布局
小阿宁的猫猫
07-18 243
1.表单 (1)输入框（input）样式 (2)输入框（input）边框 (3)输入框(input) 颜色 (4)输入框(input) 聚焦 (5)文本框（textarea）样式 (6)下拉菜单（select）样式 (7)按钮样式 2.响应式表单 3.网页布局 (1)头部区域 (2)菜单导航区域 4.响应式布局 5.表单演示代码 amiao11.css 6.演示结果...
Angular 响应式表单实战
qq_21987433的博客
05-05 804
将对下图所示的表单进行数据模型的创建和数据模板的绑定【1】数据模型的创建import { Component, OnInit } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; import { Stock, StockService } from '../../stock.servic...
Angular 笔记12（表单与用户输入——响应式表单、验证表单、动态表单构建）
hequhecong10857的博客
11-15 985
响应式表单 响应式表单概述 响应式表单对表单状态的每一次变更都会返回一个新的状态，这样可以在变化时维护模型的整体性。响应式表单是围绕 Observable 流构建的，表单的输入和值都是通过这些输入值组成的流来提供的，它可以同步访问。 此篇只记录需要注意的知识点，官方文档（中文版）更详细 显示表单控件的值 通过可观察对象 valueChanges，你可以在模板中使用 AsyncPipe 或在组件类中使用 subscribe() 方法来监听表单值的变化。 使用 value 属性。它能让你获得当前值的一份快
响应式表单组件布局
qq_41068362的博客
03-11 1483
响应式表单组件布局，表单一行能放下多少就多少，会响应式的控制
动态增加响应式表单
weixin_30730053的博客
08-02 192
页面文件： <form *ngFor="let form of list" [formGroup]="form"> <div class="form-group"> <label>姓名：</label> <input style="color: #000;" type="text" formControlName="name...
Angular表单之响应式表单
hzjanger的博客
06-16 297
简介 angular的表单分响应式表单和模板驱动表单，响应式表单和模板驱动表单的区别在官网上是这么讲的 响应式表单更健壮：它们的可扩展性、可复用性和可测试性更强。 如果表单是应用中的关键部分，或者你已经准备使用响应式编程模式来构建应用，请使用响应式表单 模板驱动表单在往应用中添加简单的表单时非常有用，比如邮件列表的登记表单。它们很容易添加到应用中，但是不像响应式表单那么容易扩展。如果你有非常基本...
什么是动态表单，什么是响应式表单，而这有何区别？（含实例）
Yasuo的博客
05-31 1160
总之，无论是动态表单还是响应式表单，都可以用来创建复杂的表单。响应式表单是指使用 Angular 提供的 Reactive Forms 模块来创建表单，它是一种声明式的表单形式，通过在组件类中定义表单模型来描述表单的结构和验证规则。4. 响应式表单提供了更加可控和可预测的方式来管理表单，可以更容易地实现表单的复杂验证和交互逻辑，而动态表单则更加灵活，可以根据不同的需求进行定制化开发。2. 动态表单可以根据不同的需求动态地添加或删除表单控件，而响应式表单的结构在编译时就已经固定，无法动态更改表单的结构。
响应式设计-label
dangdangliu的专栏
01-15 522
响应式设计最起始来源于建筑里的，响应式建筑学科，物理空间根据存在在其中的人的情况来进行响应，结合嵌入式机器人技术和可拉伸材料来建造一种可以根据人群的情况进行伸缩，弯曲和扩展的墙体结构，还可以通过运动传感器配合气候控制系统，调整室内的温度和环境光。   在Web设计中也采用这种模式。由于对于不同的硬件设备，其分辨率，尺寸，清晰度不同，而且会有横屏竖屏，并且设备还在不断地变化。开发者不可能针对每一种
vue3怎么渲染form表单数据
06-01
最后，在表单提交时，可以通过响应式对象获取表单数据进行处理。示例代码如下： ```html 姓名： 年龄： 邮箱： 提交 import { ref } from 'vue'; export default { setup() { ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值