javascript-Angular中带有子组件的反应形式

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript-Angular中带有子组件的反应形式，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1538字，纯文字阅读大概需要3分钟。

内容图文

如您所见,我有一个带有子组件的父亲表单组件.
{{myFormFather.value}}向我显示nickName值和名称值,但不显示年龄值.
{{myFormFather.status}}无法识别子组件.就像我的孩子是幻影一样,为什么呢？

my-form-father.html

<form [formGroup]="myFormFather" (ngSubmit)="onSubmit()">
    <input formControlName="nickName">
    <input formControlName="name">
    <my-form-child
            [age]="myFormFather">
    </my-form-child>
    <button type="submit"
            [disabled]="myFormFather.invalid">Save
    </button>
</form>

我的父亲

myFormFather = new FormGroup({
    nickName: new FormControl(),
    name: new FormControl()
});

constructor(private fb:FormBuilder) {}

ngOnInit() {this.createForm()}

createForm() {
    this.myFormFather = this.fb.group({
        nickName: ['', [Validators.required],
        name: ['', [Validators.required]
    });
}

my-form-child.html

<div [formGroup]="ageForm">
    <input formControlName="age">
</div>

我的形式的孩子

@Input() ageForm = new FormGroup({
    age: new FormControl()
});

constructor(private fb:FormBuilder) {}

ngOnInit() {this.createForm()}

createForm() {
    this.ageForm = this.fb.group({
        age: ['', [Validators.required]]
    });
}

解决方法:

Hi, the solution you have been looking for

演示Stack Blitz

Problem was: You overwrote the form group being passed from the parent

@Input() ageForm = new FormGroup({
  age: new FormControl()
});

constructor(private fb: FormBuilder) {}

ngOnInit() {
  this.createForm()
}

createForm() {
  // This is overwriting the FormGroup passed from parent!
  this.ageForm = this.fb.group({
    age: ['', [Validators.required]]
  });

  // Instead you had to use
  // this.ageForm.addControl("age", new FormControl('', Validators.required));
}

内容总结

以上是互联网集市为您收集整理的javascript-Angular中带有子组件的反应形式全部内容，希望文章能够帮你解决javascript-Angular中带有子组件的反应形式所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端