要在Angular中使用ng-template的作用域更改时绑定到formControlName,可以使用ng-container来创建一个临时的包装器,并在其中定义ng-template的作用域。以下是一个示例解决方法:
首先,在组件的HTML模板中,使用ng-container来创建一个临时的包装器,并在其中定义ng-template的作用域。将formControlName绑定到ng-container上,而不是ng-template上。
然后,在组件的类中,使用ViewChild装饰器来获取ng-template,并在模板上找到对应的表单控件。
import { Component, ViewChild, TemplateRef } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponent {
myForm: FormGroup;
@ViewChild('myTemplate') myTemplate: TemplateRef;
constructor(private formBuilder: FormBuilder) {
this.myForm = this.formBuilder.group({
myControl: this.formBuilder.group({
myField: ['']
})
});
}
// 在某个事件中,获取表单控件并做一些操作
getFormControl() {
const formControl = this.myTemplate.createEmbeddedView(null).rootNodes[0].querySelector('[formControlName="myField"]');
console.log(formControl);
}
}
在上面的示例中,我们使用ViewChild装饰器来获取名为"myTemplate"的ng-template,并在getFormControl方法中找到相应的表单控件。您可以根据自己的需求进行进一步的操作。
请注意,ng-template的作用域更改时,表单控件的绑定也会相应地更新。