Загрузка файла в API, а также отправка других текстовых полей - в Angular

Question

Я пытаюсь загрузить файл в конечную точку API (созданную мной с помощью Laravel) с помощью формы HTML, и это работает, когда я просто загружаю файл.Однако я также хочу отправить некоторые базовые текстовые поля как часть запроса.

Проблема, которую я нахожу, состоит в том, что некоторые поля будут пустыми, и в этом случае в запросе передается значение «undefined» какстрока, которая, конечно, не то, что мне нужно, я бы просто хотел, чтобы пустые поля отправляли ноль или вообще ничего.

Я мог бы добавить несколько операторов if, чтобы сначала проверить, не является ли каждое поле пустым, ноэто не очень изящно.Существует ли простой способ динамического построения объекта данных формы из , в зависимости от того, какие поля присутствуют в форме ?

Код Angular 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

Другой подход - логический оператор ИЛИ.Например, цитирование вашего кода:

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

Это работает, потому что myObject.x || default равно default, если myObject.x не определено (если нет, просто возвращает myObject.x).

Answer 2

Вы можете установить значения формы по умолчанию.Пример формы здесь (в подходе реактивной формы - 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
    })
}