어떻게 템플릿 참조 변수의 이름을 동적으로 지정할 수 있습니까?

Question

대략이 구조를 따르는 템플릿에 많은 상용구 코드가 있습니다.

<div class="form-group col-lg-6" 
    [ngClass]="{'has-error': errors?.startDate || !startDate.valid}"> 
    <label>Start Date</label> 
    <input class="form-control" 
      [(ngModel)]="currentEntity.startDate" 
      #startDate="ngModel" name="startDate" 
      required /> 
    <small *ngIf="!startDate.valid" class="help-block"> 
     Start Date Is Required 
    </small> 
    <small *ngIf="errors?.startDate" class="help-block"> 
     {{errors.startDate}} 
    </small> 
</div> 

두 번째 오류 블록은 돌아 오는 서버 유효성 검사를위한 것입니다.

나는 <validatedInput [inputName] = "startDate" />과 같은 내용 일 수 있고 각 속성의 주요 요소를 바꿀 수있는 지시문을 만들기를 바랬습니다. 어쨌든 #startDate="ngModel"을 #{{inputName}}="ngModel"과 같이 동적으로 변경해야합니까? 또한 동적으로 설정해야합니다.

"@ angular/forms": "0.1.1"을 실행 중입니다.

Answer 1

템플릿 참조 변수는 Günter가 지적한대로 정적입니다. 그러나 Angular 2 양식 작성기를 사용하면 더 이상 필요하지 않을 수도 있습니다.

this.myForm = this.formBuilder.group 
({ 
    "startDate": [currentEntity.startDate, Validators.required], 
    ... 
}); 

을이 같은에 HTML을 수정합니다 (구성 요소 생성자에 주입 할 필요가 formbuilder. 주) : : 구성 요소에서

이 같은 형태의 그룹을 만들 수 있습니다

<div class="form-group col-lg-6" [ngClass]="{'has-error': errors?.startDate || !startDate.valid}"> 
     <label>Start Date</label> 
     <input class="form-control" [formControl]="myForm.controls['startDate']" name="startDate" /> 
     <small *ngIf="!myForm.controls['startDate'].valid" class="help-block"> 
     Start Date Is Required 
     </small> 
    ... 

여기서는 RC4의 양식 구문을 사용하고 있습니다. 또한 배열 FormGroup을 반복하고 * ngFor를 통해 이러한 컨트롤을 여러 개 만들 수 있습니다. (그렇게하려면 FormGroup에서 관련 정보를 추출 할 수있는 임시 배열이 필요할 수 있습니다.)

FormGroups의 또 다른 이점은 그 요소가 모든 종류의 흥미로운 작업을 수행 할 수있는 Observables이라는 사실입니다.