角反应形式阵列 [英] angular reactive form array

查看：35
本文介绍了角反应形式阵列的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我需要反应式，结果是这样的

我尝试了一些代码，但出了点问题.

[{"account":{ "accountNum": "用户输入的数字" }}]

解决方案

Givi，你有一个包含一个元素的数组，数组内部有一个具有account"属性的对象，它是另一个具有accountNum"属性的对象一个字符串

myForm=new FormArray([//一个包含一个元素的 formArraynew FormGroup({//这是一个带有属性帐户"的表单组account:new FormGroup({//这是一个带有属性accountNum"的formGroup//那是一个 FormControlaccountNum:new FormControl("用户将在输入中输入的数字")})})])

在 .html 中也可以看到

{{myForm?.value|json}}

你看，如果你有一个数组，你需要一个 FormArray，如果你需要一个对象，你需要一个 FormGroup，如果你需要一个值，你需要一个 FormControl.请尝试理解，而不是简单地复制和粘贴答案.

更新显示 .html 以更改表单

好吧，你可以使用一个独特的 formControl

但我们将学习如何管理 formArray.通常，如果 formArray 是 formGroup 的属性，我们会使用类似

<div formArrayName="myArray"><div *ngFor="让控件在 myForm.get('myArray').controls;让我=索引"><div [formGroupName]="i"><!--这里是我们数组的控件-->

</表单>

如果我们可以管理一个数组，我们需要知道一个formArray是一个formGroup，所以我们可以做一些像

 <div [formGroup]="myArray"><div *ngFor="让控件在 myArray.controls;让我=索引"><!--看看如何将 [formGroupName]="i" 替换为 [formGroup]="controls"*ngFor 的变量 --><div [formGroup]="控件"><!--这里是我们数组的控件-->

I need reactive form which result will be like this

I tried some codes but something wrong.

[{"account":{ "accountNum": "numbers which user will type in input" }}]

解决方案

Givi, you has an array with one element, inside the array an object with a propertie "account" that is another object with a propertie "accountNum" that is a string

myForm=new FormArray([       //an formArray with one element
    new FormGroup({          //that is a formGroup with a propertie "account"
      account:new FormGroup({//that is a formGroup with a propertie "accountNum"
                             //    that is a FormControl
        accountNum:new FormControl("numbers which user will type in input") 
      })
    })
  ])

Too see in the .html

<pre>{{myForm?.value|json}}</pre>

You see that if you has an array you need a FormArray, if you need an object, you need a FormGroup and if you need a value, you need a FormControl. Please, try understand, not simply copy and paste the answer.

Updated show a .html to change the form

Well, you can use a unique formControl

<input [formControl]="myForm.at(0).get('account').get('accountNum')">

But we are going to learn how manage a formArray. Normally if a formArray is a propertie of a formGroup we use some like

<form [formGroup]="myForm">
   <div formArrayName="myArray">
      <div *ngFor="let controls in myForm.get('myArray').controls;
               let i=index">
            <div [formGroupName]="i">
               <!--here the controls of our array-->
            </div>
      </div>
   </div>
</form>

If we can manage an array we need know that a formArray is a formGroup, so we can make some like

   <!--see that we used [formGroup]-->
   <div [formGroup]="myArray"> 
      <div *ngFor="let controls in myArray.controls;
               let i=index">
            <!--see how replace the [formGroupName]="i" by [formGroup]="controls"
                      the variable of the *ngFor -->
            <div [formGroup]="controls">
            <!--here the controls of our array-->
            </div>
      </div>
   </div>

这篇关于角反应形式阵列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆