如何使用NgModel实现Angular向ASP.NET Core Web API提交带附件的SharePoint列表项

实现方案 #

因为提交到后端的FormData结构和你之前用FormControl的实现完全一致，所以ASP.NET Core Web API对接SharePoint的逻辑不需要做任何修改，只需要调整前端Angular的模板驱动表单实现即可，具体步骤如下：

1. 导入FormsModule #

在对应业务模块中导入FormsModule，才能启用NgModel双向绑定能力：

// app.module.ts 或你的业务模块文件
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; 
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 组件类定义绑定变量 #

在组件中定义表单字段对应的绑定变量，以及文件处理、提交逻辑：

// 业务组件.ts
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-sp-item-form',
  templateUrl: './sp-item-form.component.html'
})
export class SpItemFormComponent {
  // SharePoint列表普通字段绑定变量
  itemTitle: string = '';
  itemRemark: string = '';
  // 附件存储变量
  selectedAttachment: File | null = null;
  // 后端接口地址
  apiUrl = '你的ASP.NET Core Web API提交地址';

  constructor(private http: HttpClient) {}

  // 监听文件选择事件
  handleFileSelect(e: Event) {
    const input = e.target as HTMLInputElement;
    if (input.files?.length) {
      this.selectedAttachment = input.files[0];
    }
  }

  // 表单提交逻辑
  submitForm() {
    // 构造FormData，逻辑和之前FormControl版本完全一致
    const formData = new FormData();
    formData.append('title', this.itemTitle);
    formData.append('remark', this.itemRemark);
    if (this.selectedAttachment) {
      formData.append('attachment', this.selectedAttachment, this.selectedAttachment.name);
    }

    // 调用接口提交
    this.http.post(this.apiUrl, formData).subscribe({
      next: (res) => console.log('列表项提交成功', res),
      error: (err) => console.error('提交失败', err)
    });
  }
}

3. 模板中绑定NgModel #

注意受浏览器安全限制，文件输入框不支持直接用[(ngModel)]，绑定change事件处理即可，不影响整体用NgModel实现表单的需求：

<!-- 业务组件.html -->
<form #spForm="ngForm" (ngSubmit)="submitForm()">
  <div>
    <label>列表项标题</label>
    <input type="text" name="title" [(ngModel)]="itemTitle" required>
  </div>
  <div>
    <label>列表项备注</label>
    <textarea name="remark" [(ngModel)]="itemRemark" required></textarea>
  </div>
  <div>
    <label>上传附件</label>
    <input type="file" (change)="handleFileSelect($event)" required>
  </div>
  <button type="submit" [disabled]="spForm.invalid || !selectedAttachment">提交</button>
</form>

注意事项 #

• 如果需要上传多附件，只需要把selectedAttachment改成File[]数组类型，文件选择时把所有选中的文件存入数组，提交时循环追加到FormData即可
• 如果需要加表单校验，直接用模板驱动表单的原生校验指令即可，不需要调整提交逻辑

内容的提问来源于stack exchange，提问作者Deep Ponkiya