Angular 自动完成无法 select 不存在的值

Question

我开发了一个管理“任务”的网络应用程序（Angular，Typescript）。对于每个任务，我想用一个表格为其添加标签。我创建了一个 angular 表单来向任务添加标签，这表明我已经存在标签，以避免用户通过多次输入相同的标签而在数据库中创建冗余，只是语法略有不同。它工作得很好：当我写一个已经存在的标签的开头时，它会向我提示，我可以 select 它并且确定！但问题是当我写 then select 一个不存在的标签时，不建议。 returns 形式是一个未定义的值，而我想获得我的新标签名称作为响应（然后我将其添加到 TagModel）。这是我的代码：

对话框-添加-tag.component.ts

export class DialogAddTagComponent implements OnInit {
    formGroup: FormGroup;

    tagFormControl: FormControl;

    tagOptions: Observable <TagGetAllResponseInterface>;

    displayFunction (key: {name: string}): string {
        if (key === null) {
            return null;
        }
        return `${key.name}`;
    }

    constructor (
        public tagService: TagService,
        public formBuilder: FormBuilder,
        private readonly dialogRef: MatDialogRef<DialogAddTagComponent>
    ) { }

    ngOnInit (): void {
        this.formGroup = this.formBuilder.group({
            tag: this.tagFormControl
        });
        this.tagFormControl = new FormControl(
            null,
            [Validators.required.bind(this)]);
        this.tagOptions = this.tagFormControl.valueChanges.pipe(
            debounceTime(100),
            switchMap(value => from(this.tagService.getAll(25, 0, value)))
        );
    }

    onSelect (): void {
        this.dialogRef.close({name: this.tagFormControl.value.name});
    }
}

对话框-添加-tag.component.html

<h2 mat-dialog-title>Add a tag</h2>

<form id="form-container" class="mat-typography container" [formGroup]="formGroup">
    <mat-form-field>
        <input type="text" placeholder="Pick one" aria-label="Number" matInput [matAutocomplete]="auto" [formControl]="tagFormControl">
        <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFunction">
            <mat-option *ngFor="let tag of (tagOptions | async)?.tags" [value]="tag">
                {{tag.name}}
            </mat-option>
        </mat-autocomplete>
    </mat-form-field>

    <button mat-raised-button
            color="primary"
            class="full-width-button margin-top-button"
            [disabled]="tagFormControl.invalid"
            (click)="onSelect()"
    >Select</button>
</form>

Tag.interface.ts

export interface TagGetAllResponseInterface {
    tags: {
        name: string;
    }[];
}

export interface TagGetAllRequestInterface {
    limit: string;
    page: string;
    search?: string;
}

我认为问题出在：

switchMap(value => from(this.tagService.getAll(25, 0, value))

which returns 当标签不存在时为 null。那么，当我点击 Select 时，我必须添加什么才能使它 select 是表单中写入的标签，即使它不存在于数据库中？

提前致谢！

Answer 1

我认为最好的选择是如果列表中没有任何匹配项，则使 tagService.getAll() 函数 return 为给定值。

因此，如果该函数在其列表中搜索但未找到任何匹配项，则它应该 return 原始值（写在表格中的值）

Angular 自动完成无法 select 不存在的值

Angular autocomplete unable to select unexisting values

forms

autocomplete

typescript

angular-material

angular