将嵌套的formControl放置在单独的组件中时，如何访问angular的formarray的索引值? [英] how to access the index value of formarray of angular, when nested formControls are placed in a separate component?

问题描述

我遵循了网站链接 http://plnkr.co/edit/ZjEuBWrmJDiRmP4FeCzv?p=preview

I followed a tutorial from the website link https://scotch.io/tutorials/how-to-build-nested-model-driven-forms-in-angular-2 , to make a reactive form with an ability to add multiple form controls and that worked well. I moved the nested form controls in a separate component as guided in the tutorial and i need to access the index value of the formarray from the parent component. I want this index value to set that in one of the formconrols default value here is my code in plnkr, http://plnkr.co/edit/ZjEuBWrmJDiRmP4FeCzv?p=preview

我分开的日期和描述组成部分

my separated day and description component,

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

    @Component({
        selector: 'day-and-daydescription',
        template: ` <div [formGroup]="formGroup">
                        <div class="form-group col-xs-4" >
                            <label for="text">Day</label>
                            <input  type="text" class="form-control" formControlName="day" [ngModel]="group.i + 1"  readonly>                    
                        </div>
                        <!--Day Description-->
                        <div class="form-group col-xs-4">
                            <label>Description</label>
                            <input  type="text" class="form-control" formControlName="description">
                        </div>  
                    <div>`
    })
    export class DayAndDescriptionComponent {
        @Input('group')
        public formGroup: FormGroup;
    }  

请查看一下plunker中的整个代码.

Please have a look at the whole code in plunker.

推荐答案

您自己已经注意到，可以从父级操作整个表单，而无需尝试从子级访问索引.您在父级中对表单执行的所有操作都会反映在子级中.

As you yourself noticed, you can manipulate the whole form from the parent, no need to try and access the index from the child. Everything you perform to the form in the parent, will reflect in the child.

关于错误:

检查后，表达式已更改.

Expression has changed after it was checked.

这是正常现象，发生在开发人员模式下.摘录自表达式___被检查后已更改:

This is normal and happens in dev mode. Excerpt from Expression ___ has changed after it was checked:

简而言之，在开发模式下，每轮变更检测之后都会紧随第二轮，以验证自第一轮结束以来没有任何绑定发生更改，因为这表明变更是由变更检测本身引起的.

In short, when in dev mode, every round of change detection is followed immediately by a second round that verifies no bindings have changed since the end of the first, as this would indicate that changes are being caused by change detection itself.

导致此问题的是实际的 @Input .您可以手动触发更改检测，此错误将消失.由于我们正在处理 @Input ，因此可以在 ngOnChanges 中进行此操作:

It's the actual @Input in child that is causing this. You can trigger change detection manually and this error will be gone. Since we are dealing with an @Input, you can do this in ngOnChanges:

constructor(private ref: ChangeDetectorRef) { }

ngOnChanges() {
  this.ref.detectChanges()
}

这篇关于将嵌套的formControl放置在单独的组件中时，如何访问angular的formarray的索引值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！