我想使用从其他组件获取的值制作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);
}

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

#1楼 票数:1 已采纳

您可以使用以下方法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};

演示🚀🚀

#2楼 票数:0

您可以传递整个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);

  ask by PabloPhones translate from so

未解决问题?本站智能推荐:

1回复

角反应形式没有价值

我有一个反应式表单,该表单从数据库中获取值并将其设置在字段中。 该表格用于将值更新到数据库。 编辑字段中的值后,可以成功更新更新后的字段。 但是,当不触摸值时,表单将无法获取字段中的值,从而导致空值。
1回复

如何以 Angular 反应形式填充日期输入?

我有一个从日期输入中获取日期的 FormGroup。 表单控件: 分配 new Date() 以获取默认日期,以防未选择日期。 模板: 但是,当我使用patchValue填充日期(来自以前持久化的对象)时,它不起作用/显示在日期输入标签的文本中(在网页中)。 我错过了什么?
2回复

来自@Input的反应形式setValue

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

如何控制输入值是反应形式的整数

我将输入步骤设置为1,但它仍然支持输入小数,我想要显示的是:当你打开它,并在此输入框中输入值时,它禁止用户输入小数,只有整数有效。
2回复

反应形式其他反应形式的数组

我正在尝试创建一个反应形式,下面是它的原型。 我必须创建3个反应形式Form1,Form2,Form3 ,然后将它们合并为单个反应形式,例如SignUpForm 。 就像SignUpForm是3种不同反应形式的数组一样。 我用谷歌搜索FormBuilder,FormArray和F
4回复

混合反应形式和模板形式

我使用模板表单构建了一个包含大量输入的大表单。 现在我需要动态添加一部分输入。 由于使用 Reactive Form 动态添加输入似乎更容易,我想将输入的特定部分更改为 Reactive Form。 那么是否可以在同一个表单标签中混合反应式表单和模板表单呢?
2回复

如何清除我的 Angular 反应形式?

我的表单中有一个 mat-radio-group,我想清除单选按钮,这样我的测验应用程序中的每个新问题都不会被选中。 我该怎么做? 这是我的表单的外观:
2回复

反应形式Angular formGroup

我正在建立具有反应形式的表单,但是我在组内有一些嵌套组,对于该嵌套组,我只需要输入验证即可。 我的问题是,在该嵌套组中,我必须进行验证,即如果用户在某项输入中输入了某些内容,则不再需要该组中的其他输入。 这就是我现在所拥有的,我试图添加Validators.required而不是Requ