这是我通过一个API获取的示例HTML字符串,我想用angular绑定它。
<div class="col-md-6">
<div class="form-group has-danger">
<label for="input1">Shirnkrap <span class="text-danger">*</span></label>
<div class="col-md-12">
<select class="form-control" formControlName="shirnkrap">
<option value=no>NO</option><option value=yes>YES</option>
</select>
</div>
</div>
</div>
我正在传递HTML字符串。
this.projectService.getDynamicField().
then(content=> {
this.dynamicFields = this.sanitizer.bypassSecurityTrustHtml(content);
//this.dynamicFields = content;
});
作为角度页面上的输出,它仅显示标签和<option>
标签的YES和NO。在console.log
我看到了WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).
在网上搜索之后,我找到了使用这个this.dynamicFields = this.sanitizer.bypassSecurityTrustHtml(content);
的解决方案来解决我的一个问题,即内容没有显示,但是这导致了另一个在Angular验证中无法正常工作的问题。
所以我想要做的就是使用HTML sting并且内置的Angular验证也应该有效。
这是我的component.ts
文件代码。
projectForm: FormGroup;
constructor(private sanitizer:DomSanitizer,private router: Router,private fb: FormBuilder,private projectService: ProjectService,private fnService:FunctionsService, private userService : UserService) {
this.dropzoneConfig ={ url : environment.apiurl+'/project/driveupload' };
this.projectForm = fb.group({
'project_name':[null, Validators.required],
'shirnkrap':[null, Validators.required],
'cd_text':[null, Validators.required]
});
}
没有消毒的输出
使用清理输出
消毒后 console.log
我的HTML
<form class="form-material form-horizontal" [formGroup]="projectForm" >
<div class="row">
<div class="col-md-12" [innerHTML]="dynamicFields" id='dynamicHtml'>
</div>
</div>
</form>
有人可以指导我如何才能使这个工作?