首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

[ formarray ][SubmitForm][Angular]无法从from数组提交值

问题描述:[formarray][SubmitForm][Angular]无法从form数组提交值

回答: 在Angular中,FormArray是一个用于管理动态表单控件的类。它允许我们在表单中动态添加、删除和更新表单控件。当我们使用FormArray时,有时可能会遇到无法从FormArray提交值的问题。

解决这个问题的方法是确保在提交表单之前,将FormArray中的值正确地提取出来并进行处理。以下是解决该问题的步骤:

  1. 在组件中创建一个FormArray对象,并将其与表单控件关联起来。例如:
代码语言:txt
复制
import { Component } from '@angular/core';
import { FormGroup, FormControl, FormArray } from '@angular/forms';

@Component({
  selector: 'app-my-form',
  template: `
    <form [formGroup]="myForm" (ngSubmit)="onSubmit()">
      <div formArrayName="myArray">
        <div *ngFor="let control of myForm.get('myArray').controls; let i = index">
          <input [formControlName]="i" />
        </div>
      </div>
      <button type="submit">Submit</button>
    </form>
  `,
})
export class MyFormComponent {
  myForm: FormGroup;

  constructor() {
    this.myForm = new FormGroup({
      myArray: new FormArray([]),
    });
  }

  onSubmit() {
    // 提交表单时处理FormArray中的值
    const values = this.myForm.value.myArray;
    console.log(values);
    // 执行其他操作,如发送到服务器等
  }
}
  1. 在模板中,使用formArrayName指令将FormArray与表单控件关联起来,并使用*ngFor指令循环遍历FormArray中的控件。
  2. onSubmit方法中,通过this.myForm.value.myArray获取FormArray中的值,并进行后续处理。在这个例子中,我们只是简单地将值打印到控制台上,你可以根据实际需求进行其他操作,比如将值发送到服务器。

推荐的腾讯云相关产品和产品介绍链接地址:

  • 腾讯云云服务器(CVM):提供弹性计算能力,满足各种业务场景需求。详情请参考:腾讯云云服务器
  • 腾讯云云数据库 MySQL 版:提供高性能、可扩展的 MySQL 数据库服务。详情请参考:腾讯云云数据库 MySQL 版
  • 腾讯云人工智能:提供丰富的人工智能服务,包括图像识别、语音识别、自然语言处理等。详情请参考:腾讯云人工智能
  • 腾讯云物联网平台:提供全面的物联网解决方案,帮助用户快速构建物联网应用。详情请参考:腾讯云物联网平台
  • 腾讯云移动开发平台:提供一站式移动应用开发服务,包括移动应用开发、测试、分发等。详情请参考:腾讯云移动开发平台

请注意,以上推荐的腾讯云产品仅供参考,具体选择应根据实际需求进行。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular系列教程-第四节

1.表单 Angular 提供了两种不同的方法来通过表单处理用户输入:响应式表单和模板驱动表单。...两者都从视图中捕获用户输入事件、验证用户输入、创建表单模型、修改数据模型,并提供跟踪这些更改的途径 使用’@angular/forms’库中的FormGroup, FormControl,FormArray...和更新) formgroup使用 表单提交 更新部分内容(patchValue) 表单验证(导入Validators,设置字段属性) 表单状态(status) formarray(管理任意数量控件...max 此验证器要求控件的小于等于指定的数字 required 此验证器要求控件具有非空 requiredTrue 此验证器要求控件的为真 email 此验证器要求控件的能通过 email...maxLength 此验证器要求控件的长度小于等于所指定的最大长度。当使用 HTML5 的 maxLength 属性时,此验证器也会生效。 pattern 此验证器要求控件的匹配某个正则表达式。

2.8K50
  • Element Plus 表单验证详解

    submitForm提交表单时触发,调用 validate 方法验证整个表单。 resetForm:重置表单,将所有字段重置为初始,并移除校验结果。...表单验证详解 验证规则 在 rules 对象中,每个字段对应一个数组数组中包含一个或多个验证规则对象。每个验证规则对象可以包含以下属性: required: 是否必填。...自定义验证器 有时内置的验证规则可能无法满足需求,这时可以使用自定义验证器。自定义验证器是一个函数,接受三个参数:rule,value,和 callback。...resetFields(): 重置表单,将所有字段重置为初始,并移除校验结果。 clearValidate(props): 移除表单项的校验结果。...props 是需要移除校验的字段属性组成的数组,如果不传则移除所有字段的校验结果。

    35210

    Element Plus 表单验证详解

    submitForm提交表单时触发,调用 validate 方法验证整个表单。resetForm:重置表单,将所有字段重置为初始,并移除校验结果。...表单验证详解验证规则在 rules 对象中,每个字段对应一个数组数组中包含一个或多个验证规则对象。每个验证规则对象可以包含以下属性:required: 是否必填。...自定义验证器有时内置的验证规则可能无法满足需求,这时可以使用自定义验证器。自定义验证器是一个函数,接受三个参数:rule,value,和 callback。...resetFields(): 重置表单,将所有字段重置为初始,并移除校验结果。clearValidate(props): 移除表单项的校验结果。...props 是需要移除校验的字段属性组成的数组,如果不传则移除所有字段的校验结果。

    1K10

    Angular 入坑到挖坑 - 表单控件概览

    入坑到弃坑 - Angular 使用入门 Angular 入坑到挖坑 - 组件食用指南 Angular 入坑到挖坑 - 表单控件概览 三、Knowledge Graph ?...在数据验证失败的情况下,对于系统来说,表单是不允许提交的,因此可以将提交事件绑定到表单的 ngSubmit 事件属性上,通过模板引用变量的形式,在提交按钮处进行数据有效性判断,当无效时,禁用表单的提交按钮...profileForm.valid">数据提交 FormGroup 表单组控件的: {{ profileForm.value | json }} <...某些情况下,我们只是想要更新控件组中的某个控件的数据,这时需要使用 patchValue 的方式进行更新 import { Component, OnInit } from '@angular/core...使用 FormBuilder 构建的控件,每个控件名对应的都是一个数组,第一个为控件的默认,第二项和第三项则是针对这个设定的同步、异步验证方法 import { Component, OnInit

    18.9K20

    angularjs学习第四天笔记(第一篇:简单的表单验证)

    您好,我是一名后端开发工程师,由于工作需要,现在系统的0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点评与赐教....邮箱:email,使用直接给文本框的type属性赋值为email即可--type="email"     6.数字:number,使用直接给文本框的type属性赋值为number即可--type=..."number"     7.网页地址:url,使用直接给文本框的type属性赋值为url即可--type="url"   第四、表单中的控制变量     1.表单的属性访问方式为:表单名称.文本框名称...$scope.submitForm = function () { //// 表单真实提交逻辑 alert("提交表单");...false,只有提交后才赋值为ture             验证结果提示信息,只有该属性为true,才显示显示错误信息 <!

    1.7K10

    angularjs学习第四天笔记(第一篇:简单的表单验证)

    您好,我是一名后端开发工程师,由于工作需要,现在系统的0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点评与赐教....邮箱:email,使用直接给文本框的type属性赋值为email即可--type="email"     6.数字:number,使用直接给文本框的type属性赋值为number即可--type=..."number"     7.网页地址:url,使用直接给文本框的type属性赋值为url即可--type="url"   第四、表单中的控制变量     1.表单的属性访问方式为:表单名称.文本框名称...$scope.submitForm = function () { //// 表单真实提交逻辑 alert("提交表单");...false,只有提交后才赋值为ture             验证结果提示信息,只有该属性为true,才显示显示错误信息 <!

    1.3K20

    【流莺书签】基础组件(Form,Input)

    ,易于扩展.验证的时候只需要调用handlerValidateInput函数,传入和验证规则即可,返回一个boolen,如果有多条规则,只需循环调用handlerValidateInput,并结合every...Input组件的验证函数,就可以在表单提交的时候进行整体的验证了,因为每一个验证函数返回一个boolen,所以结合every函数就很容易做到当某一条没有通过的时候进行错误提示 因为流莺书签暂时用到的表单组件几乎都是...// 验证函数 const submitForm = () => { // 获取所有item的验证结果,有一个没有通过返回false 否则返回true const result...= mitt(); export type ValidateFunc = () => boolean; 组件中使用 需要在组件中绑定ref属性,然后调用form.value.submitForm()来进行验证...https://gitee.com/hzw_0174/WarblerHomepage 源码地址(github):https://github.com/alanhzw/WarblerHomepage 流莺书签-零搭建一个

    87930

    【译】开始学习React - 概览和演示教程

    state状态 现在,我们将字符数据存在变量的数组中,并将其作为props传递。这是一个很好的开始,但是请想象下,如果我们希望能够数组中删除一个项目。...提交表单数据 现在,我们已经将数据存储在状态中,并且可以状态中删除任何项目。但是,如果我们希望能够添加新数据来到状态呢?...在渲染中,让我们state中获取两个属性,并将它们分配为正确的表单键对应的。我们将把handleChange()作为输入的onChange运行,最后导出Form组件。...因为我们没有使用标准的提交功能,我们我们使用的是onClick而不是onSubmit。点击将调用我们刚才创建的submitForm。...我们将使用JavaScript的内置Fetch该URL断点中收集数据并展示它。你只需要更改index.js中的URL-import App from '.

    11.2K20

    jQuery中的常用内容总结(三)

    ,表单可以直接提交,这样带来两个问题就是安全(get提交)或表单参数验证障碍,嗯~,可能很难懂,这样吧,我先放张图,这图是原生get提交的-> ?   ...(1)">提交1 19 提交2 20...此时即使对于菜鸟也很容易写一个通用的方法处理成对象键值对的形式,在此就贡献一个吧(๑´ڡ`๑)--> 1 function submitForm(val){ 2 if(1==...通过代码和实际输出结果可以看出: 1.如果遍历的是对象类型,循环的每一项都会只输出这个对象item的键key,至于就需要Object[key]来获取了; 2.如果遍历的是数组类型,循环的每一项都会只输出这个数组...Array的下标,下标所指的需要Array[index]来获取 3.如果是混合类型,最外层若是Array则同数组循环,若是对象Object则同对象循环   嗯哼...

    81120

    angularjs 表单验证

    ('myTest', []) .controller('myController', function($scope) { $scope.submitForm =...$parsers  $parsers的是一个由函数组成的数组,当用户同控制器进行交互,并且ngModelController中的$setViewValue()方法被调用时,其中的函数在当用户同控制器进行交互...ngModelDOM中读取的会被传入$parsers中的函数,并依次被其中的解析器处理。这是为了对进行处理和修饰。 备注:ngModel....$formatters $formatters的是一个由函数组成的数组,其中的函数会以流水线的形式在数据模型的发生变化时被逐一调用。...$viewChangeListeners $viewChangeListeners的是一个由函数组成的数组,其中的函数会以流水线的形式在视图中的发生变化时被逐一调用。

    6.7K70
    领券