Angular中HTMLInputElement的value属性设置失败问题求助

嘿，我来帮你搞定这个报错～你遇到的这个InvalidStateError是浏览器安全机制导致的，具体拆解如下：

错误根源 #

你把FileReader.readAsText()返回的文件内容字符串直接赋值给了绑定<input type="file">的examen_bestand变量，但浏览器出于安全考虑，严格限制了文件输入框的value属性：

程序只能将其设置为空字符串，不能手动赋值为任何文件路径或内容（防止恶意脚本未经用户许可自动上传本地文件）。

你的代码里，[(ngModel)]="examen_bestand"会把变量值同步到input的value属性，当你把文件内容字符串赋值给它时，就触发了这个安全限制，直接抛出错误。

修复方案 #

把文件对象和文件内容分开存储，不要用绑定文件输入框的变量来存文件内容：

1. 修改HTML代码

可以移除ngModel（文件输入框的选择状态不需要双向绑定，change事件已经能捕获文件），或者把ngModel绑定到专门存文件对象的变量：

<!-- 方案1：移除ngModel，用change事件处理 -->
<input type="file" name="examen_bestand" class="form-control-file" id="exampleInputFile" aria-describedby="fileHelp" (change)="fileChanged($event)">

<!-- 方案2：保留ngModel，绑定到文件对象变量 -->
<input type="file" [(ngModel)]="selectedFile" name="examen_bestand" class="form-control-file" id="exampleInputFile" aria-describedby="fileHelp" (change)="fileChanged($event)">

2. 修改TS代码

新增一个变量专门存储文件内容，把文件对象和内容分开：

export class StudentUploadComponent implements OnInit { 
  @Input() examensStudent: Examen[] = []; 
  examen_id: number; 
  examen_bestand: string | null = null; // 专门存文件内容
  selectedFile: File | null = null; // 存选中的文件对象（方案2用）

  constructor(private serv: ExamService) { } 

  onSubmit(form) { 
    // 提交时可以使用examen_bestand里的文件内容
    console.log('文件内容:', this.examen_bestand);
    console.log('选中的文件对象:', this.selectedFile);
  } 

  fileChanged(e) { 
    const file = e.target.files[0];
    if (!file) return;
    
    this.selectedFile = file; // 方案2需要，方案1可以忽略
    const reader = new FileReader(); 
    reader.onload = () => { 
      // 把文件内容存到单独的变量，不要影响文件输入框的绑定
      this.examen_bestand = reader.result as string; 
    }; 
    reader.readAsText(file); 
  } 

  ngOnInit() { 
    this.serv.getExams().subscribe(data => this.examensStudent = data); 
  } 
}

这样修改后，既可以正常获取文件内容，又不会触发浏览器的安全限制啦～

内容的提问来源于stack exchange，提问作者Sinan Samet