我想使用内容投影，但无法正常工作。
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"> *</span></label>
<ng-content></ng-content>
</div>
`
})
export class MyFormGroup {
@Input() myLabel: string;
}
如何将跨度中的 *ngIf 条件绑定(bind)到投影输入元素的必需属性？目标是在 [required] 变为真时在外部组件中显示星号。
编辑:我做了一个 - 不工作 - plunkr表明我的意思。
最佳答案
您可以使用 ContentChild 装饰器在 ng-content 中引用控件:
@Component({
selector: 'my-form-group',
template: `
<div class="form-group">
<label>{{myLabel}}<span *ngIf="required"> *</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 ]
});
有关详细信息，请参阅此问题:
另请参阅本文(“字段的表单组件”部分)了解更多详细信息:
编辑
深入了解之后，您可以检查输入是否应用了 RequiredValidator 指令:
@Component({
selector: 'my-form-group',
template: `
<div class="form-group">
<label>{{myLabel}}<span *ngIf="required"> *</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();
}
}
关于angular - 如何绑定(bind)到 angular2 中投影内容中的属性？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36978453/