无法使用输入标记注入html字符串

时间:2017-12-25 09:06:26

标签: javascript html angular

这是我通过一个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]

    });
}

没有消毒的输出

Output without sanitizing

使用清理输出

enter image description here

消毒后

console.log

Console log after sanitizing

我的HTML

<form class="form-material form-horizontal" [formGroup]="projectForm" >
      <div class="row">
           <div class="col-md-12" [innerHTML]="dynamicFields" id='dynamicHtml'>

            </div>
      </div>
</form>

有人可以指导我如何才能使这个工作?

0 个答案:

没有答案