Как я могу привязать свойство к прогнозируемому контенту в angular2?

Question

Я хочу использовать контентную проекцию, но я не могу заставить ее работать.

HTML, является

<form [ngFormModel]="demoForm" (ngSubmit)="onSubmit()"> 
    <my-form-group myLabel="Some Label"> 
    <input type="text" [ngFormControl]="demoForm.controls['someInput'] [required]="true"> 
    </my-form-group> 
</form> 

Компонент является

@Component({ 
    selector: 'my-form-group', 
    template: ` 
    <div class="form-group"> 
     <label>{{myLabel}}<span *ngIf="required">&nbsp;*</span></label> 
     <ng-content></ng-content> 
    </div> 
    ` 
}) 

export class MyFormGroup { 
    @Input() myLabel: string; 
} 

Как я могу связать * ngIf состояние в пролете к требуемым свойством проектируемого элемента ввода? Цель состоит в том, чтобы показать звездочку во внешнем компоненте, когда [требуется] становится истинным.

Редактировать: Я сделал - не работает - plunkr, чтобы показать, что я имею в виду.

Answer 1

Вы можете ссылаться на контроль в ng-content с помощью ContentChild декоратора:

@Component({ 
    selector: 'my-form-group', 
    template: ` 
    <div class="form-group"> 
     <label>{{myLabel}}<span *ngIf="required">&nbsp;*</span></label> 
     <ng-content></ng-content> 
    </div> 
    ` 
}) 
export class MyFormGroup { 
    @ContentChild(NgFormControl) state; // <------ 
    @Input() myLabel: string; 

    ngAfterViewInit() { 
    this.required = (this.state.validator === Validators.required); // <------- 
    } 
} 

Таким образом, вы будете иметь доступ к свойствам управления и специально валидатор. Если у вас есть Validators.required один, ваш вход необходим.

Что мне непонятно, так это то, что вы используете ngFormControl и атрибут required. Я думаю, что вы должны использовать следующие вместо:

this.demoForm = formBuilder.group({ 
    someInput: ['', Validators.required ] 
}); 

Смотрите этот вопрос для более подробной информации:

• Check if input control has certain type of vallidator in angular2

Смотрите также эту статью (раздел «Форма компонент для полей») для получения более подробной информации:

• http://restlet.com/blog/2016/02/17/implementing-angular2-forms-beyond-basics-part-2/

Редактировать

После вырыл немного, вы можете проверить, что RequiredValidator директива применяется на входе:

@Component({ 
    selector: 'my-form-group', 
    template: ` 
    <div class="form-group"> 
     <label>{{myLabel}}<span *ngIf="required">&nbsp;*</span></label> 
     <ng-content></ng-content> 
    </div> 
    ` 
}) 
export class MyFormGroup { 
    @ContentChild(RequiredValidator) requiredValidator; // <------ 
    @Input() myLabel: string; 

    constructor(private cdr:ChangeDetectorRef) { 

    } 

    ngAfterViewInit() { 
    this.required = (this.requiredValidator != null); // <------- 
    this.cdr.detectChanges(); 
    } 
} 

Answer 2

Потому что я не получил больше ответов до сих пор, в Тем временем я попытался найти решение. Я нашел один, что не очень удовлетворительно. Я просто вводя «требуется» также во внешний контейнер. Мне не нравится это решение, потому что он дважды вводит значение.

И в конце я столкнулся с новой проблемой. Но вот код первого:

<my-form-group myLabel="Hallo" [myRequired]="demoForm.controls['required'].value"> 
    <input type="text" [ngFormControl]="demoForm.controls['hallo']" [required]="demoForm.controls['required'].value"> 
    errors: {{demoForm.controls['hallo'].errors | json}} 
</my-form-group> 

И компонент:

@Component({ 
    selector: 'my-form-group', 
    template: ` 
    <div class="form-group"> 
    <label *ngIf="myLabel">{{myLabel}}<span *ngIf="myRequired">&nbsp;*</span></label> 
    <ng-content></ng-content> 
    </div>` 
}) 
export class MyFormGroup { 
    @Input() myLabel: string; 
    @Input() myRequired: boolean; 
    @ContentChild(NgFormControl) ctrl; 
} 

Моя следующая проблема сейчас: Проверка не обновляется. См. Этот Plunkr, также показывающий объект ошибок ввода. https://plnkr.co/edit/cBqSB6DX68EnqvnyqrGg?p=preview

Есть ли решение для этого?(или это просто ошибка?) И, если у кого-то есть лучшее решение, то мое, мне понравится.