재사용 구성 요소가

Question

내가 angular2 상당히 새로 온 사람과 지난 몇 일 동안 나는 모델 구동 형태

을 사용하여 재사용 가능한 형태로 구성 요소를 만들려고 한

그래서 우리는 구성 요소가 말할 수 componentA.component.ts

@Component({ 
    selector: 'common-a', 
    template: ` 
    <div [formGroup]="_metadataIdentifier"> 
     <div class="form-group"> 
     <label>Common A[1]</label> 
     <div> 
      <input type="text" formControlName="valueA1"> 
      <small>Description 1</small> 
     </div> 
     <div class="form-group"> 
     <label>Common A[2]</label> 
     <div> 
      <input type="text" formControlName="valueA2"> 
      <small>Description 2</small> 
     </div> 
    </div> 
    ` 
}) 


export class ComponentA implements OnInit{ 

    @Input('group') 
    public myForm: FormGroup; 

    constructor(private _fb: FormBuilder) { 
    } 

    ngOnInit() { 
     this.myForm = this._fb.group({ 
      valueA1 : ['', [Validators.required]], 
      valueA2 : ['', [Validators.required]], 
     }); 
    } 
} 

그리고 구성 요소 B는 componentB.component.ts

@Component({ 
    selector: 'common-b', 
    template: ` 
    <div [formGroup]="_metadataIdentifier"> 
     <div class="form-group"> 
     <label>Common B</label> 
     <div> 
      <input type="text" formControlName="valueB"> 
      <small>Description</small> 
     </div> 
    </div> 
    ` 
}) 


export class ComponentB implements OnInit{ 

    @Input('group') 
    public myForm: FormGroup; 

    constructor(private _fb: FormBuilder) { 
    } 

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

내 질문은 캘리포니아 방법입니다 n 입력 제어를 주 구성 요소로 옮기지 않고이 두 하위 구성 요소를 사용하여 양식을 작성합니다. 예를 들어이 아이디어 뒤에 main.component.ts

@Component({ 
    selector: 'main', 
    template: ` 
    <form [formGroup]="myForm" (ngSubmit)="onSubmit(myForm.value)"> 
     <div> 
      <common-a [group]="formA"></common-a> 
      <common-b [group]="formB"></common-b> 
      <div> 
       <button>Register!</button> 
      </div> 
     </div> 
    </form> 
    ` 
}) 


export class Main implements OnInit{ 

    @Input('group') 
    public myForm: FormGroup; 

    public formA : FormGroup; 

    public formB : FormGroup; 

    constructor(private _fb: FormBuilder) { 
    } 

    ngOnInit() { 
     this.myForm = this._fb.group({ 
      //how can I compose these two sub forms here 
      //leaving the form control names agnostic to this component 
     }); 
    } 
} 

개념은 자신의 빌딩 블록의 일부를 공유하는 많은 복잡한 형태를 구축하는 것입니다. 이다

, 나는 [valueB, valueA1, valueA2] 내 Main 구성 요소가 formControlNames의 이름을 알고 싶어하지만, 자동적으로이를 삽입 및 업데이트/최상위 폼 그룹에서 유효성을 검사하지 않습니다.

올바른 방향에 대한 아이디어 나 요령이 도움이 될 것입니다.

Answer 1

이 하위 구성 요소에 우리의 최고 수준 FormGroup 전달 및 하위 구성 요소가 낮은 수준에 대한 본질적으로 아무것도 몰라하는 그 방법을 FormGroup 요구를 상위 수준을 formGroupName를 사용하여 높은 수준의 FormGroup에 자신을 추가함으로써 달성 될 수 있습니다

main.component.ts

template: `<...> 
    <common-a [parentForm]="myForm"></common-a> 
    <...> 

가 더 이상 사용으로 우리는 또한 견적을 제거하지 formB 선언을 얻을 것이다.

구성 요소 a.component.ts[formGroup]는 formGroupName 우리가 더 큰 전체 작업 그룹으로 구성 요소의 제어를 확인하고 부착하는 방법이며, 우리의 부모 그룹 (그들은 것이다 상위 그룹 내부의 둥지).

@Component({<...> 
template: ` 
<div [formGroup]="parentForm"> 
    <div class="form-group"> 
    <label>Common A[1]</label> 
    <div formGroupName="componentAForm"> 
     <input type="text" formControlName="valueA1"> 
     <small>Description 1</small> 
    </div> 
    <div class="form-group"> 
    <label>Common A[2]</label> 
    <div formGroupName="componentAForm"> 
     <input type="text" formControlName="valueA2"> 
     <small>Description 2</small> 
    </div> 
</div>` 
}) 

export class ComponentA implements OnInit { 
    @Input() parentForm: FormGroup; 
    componentAForm: FormGroup; 

    constructor(private _fb: FormBuilder) {} 

    ngOnInit() { 
     this.componentAForm = this._fb.group({ 
      valueA1: ['', Validators.required], 
      valueA2: ['', Validators.required] 
     }); 

     this.parentForm.addControl("componentAForm", this.componentAForm); 
    } 
} 

는 여기 plunker 이다 (나는 그것을 할 수 있다면 단지 보려면 여기를 좀 더 동적 인 B를 이용하여 구성 요소를 만들어 있습니다 만, 위의 구현은 B에 동일하게 적용) : http://plnkr.co/edit/fYP10D45pCqiCDPnZm0u?p=preview