Question

我正在尝试使用HTML表单将文件上传到API端点（由Laravel构建），并且在我刚刚上传文件时可以使用。但是，我也想发送一些基本的文本字段作为请求的一部分。

我发现的问题是某些字段将为空，在这种情况下，“ undefined”将作为字符串发送到请求中，这当然不是我想要的，我只想要空字段发送null或什么都不发送。

我可以添加多个if语句来首先检查每个字段是否为空，但这并不十分优雅。是否有一种简单的方法可以根据表单中存在的任何字段动态构建表单数据对象？

角度2代码

此组件启动模态（包含表单），并等待模态关闭。关闭模态后，组件将收到“结果”，该结果将是具有表单中字段的对象。

public openReferenceModal(): void { dialogRef.afterClosed().subscribe(result => { var fd = new FormData(); fd.append('name', result.name); fd.append('phone_number', result.phone_number); fd.append('email_address', result.email_address); // This is the file that I'm uploading fd.append('document', result.document); this.addTeacherReference(fd); }); } public addTeacherReference(item: any): void { this.teacherService .addTeacherReference(item) .subscribe( (reference) => { alert("Success!"); } ); }

模式表单中的HTML标记

<div> <mat-form-field> <input matInput placeholder="Name" [(ngModel)]="data.name" name="name" required> </mat-form-field> </div> <div class="mb-1"> <mat-form-field> <input matInput placeholder="Phone number" type="phone" [(ngModel)]="data.phone_number" name="phone_number"> </mat-form-field> </div> <div class="mb-1"> <mat-form-field> <input matInput placeholder="Email address" type="email" [(ngModel)]="data.email_address" name="email_address"> </mat-form-field> </div> <div class="pb-3"> <h6>Upload Reference</h6> <input type="file" (change)="onFileChanged($event)"> </div> <div> <button class="btn btn-secondary" [mat-dialog-close]="data">Save</button> </div>

Answer 1

您可以设置默认表单值。此处的表单示例（采用响应式表单方法-https://angular.io/guide/reactive-forms）：

// We inject the FormBuilder in our constructor
constructor(private fb: FormBuilder) {

    // Here we use the FormBuilder to build our form.
    this.complexForm = fb.group({
        // We set default values here.
        // For example, we set first and last name to the empty string ''.
        // And we set gender to 'female'.
        'firstName': '',
        'lastName': '',
        'gender': 'female',
        'hiking': false,
        'running': false,
        'swimming': false
    })
}

Answer 2

另一种方法是逻辑OR运算符。例如，引用您的代码：

var fd = new FormData();
fd.append('name', result.name || '');

之所以可行，是因为如果未定义myObject.x || default，default是myObject.x（否则，它会简单地返回myObject.x）。

将文件上传到API，同时还发送其他文本字段-Angular

2 个答案: