繁体   English   中英

反应形式和@Input

Reactive Forms and @Input

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我想使用从其他组件获取的值制作Reactiev表单。 要将数据传递给组件,请使用@Input。

例如:

import { Component, OnInit, Input } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  ...
})
export class GetData implements OnInit {
  @Input() dataToPass: DataOne;
  myForm: FormGroup;

ngOnInit() {
    this.myForm = this.fb.group({
    name: ['', [Validators.required]],
... }
}

我想在HTML中看到带有在Input中传递的数据的表单。

可能吗? 我应该在哪里将数据传递给Form?

提示后的新代码:

ngOnChanges(changes: SimpleChanges) {
    console.log(changes);

    if (changes['this.dataToPass'] && changes['this.dataToPass'].currentValue) {
      console.log('change');
    }

    if (changes['this.dataToPass'].firstChange === true) {
      console.log('Change is seen');
    }
}

第一个条件不正确。 第二个错误:ERROR TypeError:无法读取未定义的属性“ firstChange”。

下一个代码:

if (changes['dataToPass'].firstChange && changes['dataToPass']) {
      console.log('Change is seen');
      console.log(this.dataToPass.firstName);
}

我得到的是:“错误TypeError:无法读取未定义的属性firstName。”

看起来输入在此类更改之后发生。

下一个代码:

if (changes['dataToPass'].firstChange && changes['dataToPass']) {
      console.log('Change is seen');
      console.log(this.dataToPass);
}

不幸的是,我得到的信息是未定义的。 因此,它不能正常工作。

2 个回复

您可以使用以下方法patchValuesetValuereset

ngOnInit() {
    this.myForm = this.fb.group({
    name: ['', [Validators.required]],
     ... 
    });

   this.myForm.patchValue(this.dataToPass);

}

如果不将数据传递给所有控件,则使用patchValue或reset方法不会引发错误

更新!! ⚡⚡

  ngOnChanges(changes: SimpleChanges) {

    if (changes.dataToPass && changes.dataToPass.currentValue){
      this.myForm.patchValue(changes.dataToPass.currentValue)
    }

  }

ngOnChanges将跟踪dataToPass对象是否已更改,但不跟踪对象属性,您需要在每次更新任何属性时将绑定对象设置为新对象,以触发父组件的更改检测

this.userData = {...this.userData};

演示🚀🚀

您可以传递整个FormGroup作为输入,例如@Input myForm: FormGroup ,也可以传递包含所需数据的对象并将其修补到表单。

例如,假设下面的表格,

this.myForm = this.fb.group({
    name: ['', [Validators.required]],
    surname: ['', [Validators.required]],
    age: ['', [Validators.required]],
       ...
   })

和一个像

{
  name: 'John',
  surname: 'Black'
}

然后,您可以将此对象传递给@Input @Input myData: {name:string,surname:string}; 然后像这样修补您的表单

this.myForm.patchValue(myData);
1 来自@Input的反应形式setValue

我想对反应式表单进行两种方式的绑定。 首先,我需要设置从@Input数据接收的值。 实际结果是,当我设置静态字符串时,它工作正常。 父组件HTML 子组件HTML 子组件TS 这是@Input 学科对象的值 ...

2 Angular 2反应形式:如何绑定到@Input?

我有一个表,单击某行中的链接后,会弹出一个模态,该模态将显示一个表单,您可以在其中编辑该表的信息。 我正在尝试对此表单使用“反应性表单”方法,但是在弄清楚如何绑定到模式的@Input时遇到了麻烦,这是所选行的信息。 这是我尝试过的事情的一个示例: 我试图将name的值初始化为 ...

4 是否有可能 输入值没有绑定到formControl,以便我可以提交其他角度4反应形式的值?

下面是代码的简单部分。 对该输入的任何更改将触发searchUserByName()函数,并且此函数将返回用户对象列表,该列表被赋予“用户”: 将显示用户列表,我可以选择所需的用户。 selectUser()函数会将用户存储到名为“ selectedUser”的变量中,并更新用 ...

5 反应Redux和Input的onChange

我正在一页上处理许多字段,其中有些是连接的,有些不是。 您可以简单地将其想象为具有字段或类似内容的页面。 我知道有两种处理输入状态(存储其值)的方法: 存储在Redux的商店内 保存在本地状态,然后在某些事件(例如保存按钮)上将其分派到Redux的商店 我真的很喜欢Redux的方式以及它如 ...

7 反应形式中的形式

第一个表单是父表单,在其中我有另一个表单变得必要,因为属性与父表单中的属性相同。 我是这样做的 和 FormBuild 构造函数 和形式 但他给了我一个浏览器错误 感谢您的任何帮助 ...

8 反应形式的形式验证

我正在基于条件验证对表单进行验证。 条件验证是,当用户单击性别值“是”时,我需要在此之后显示hardFormSection,然后我需要对两个部分都进行验证,如果值是“否”,则隐藏该部分并清除该隐藏部分的验证。 我所做的是我创建了两种形式,并在订阅更改事件上进行了验证。 但是我得到的问题 ...

9 react-hook-form form in form

我使用了 react-hook-form,但有一个小问题。 我有一个进入模态的表单,另一个来自另一个模态=>表单中的表单。 我的问题是,当我提交第二个表单时,第一个表单正在触发。 我想触发第二个形式并返回到第一个形式。 ...

10 如何以INPUT形式附加孩子

请参见下面的代码。如何以INPUT形式添加appendChild我必须在sql上获取一种输入类型文本的值,并且btn add函数关闭每个值。 我希望所有信息表单appendChild都在表单输入中。 请帮帮我。 示例函数而不是示例代码: https : //jsfiddle. ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM