Question

我正在使用Angular材质创建“宗教下拉”。但是我提供的选择可能无法涵盖世界上所有宗教。但是，如果找不到用户，我希望为用户提供在该字段中输入其宗教信仰的选项。因此，我要做什么，给一个名为“其他选项”的选项，当他单击该选项时，将为该选项提供一个输入字段，该字段将被视为该字段的“ formcontrolName”值。

如果您在Stackblitz提供代码，那么很清楚就可以了。

Answer 1

很简单，

使用mat-autocomplete
在输入中添加一个事件（模糊），检查该值是否不是空字符串如果不在选项中，则添加到选项中

Answer 2

您可以在mat-option之前或之后使用文本输入，并且可能需要修复其CSS。下面的代码将在所有mat选项中的最后一个插入文本框。

请不要忘记将custom_religion声明为FormControl

<mat-form-field fxFlex>
          <mat-select name="allowedValuesCriteria"
            [(ngModel)]="selectedReligion">
            <mat-option [value]="1">
              Religion 1
            </mat-option>
            <mat-option [value]="2">
              Religion 2
            </mat-option>
            <mat-form-field fxFlex>
              <input matInput [formControl]="custom_religion" name="custom_religion" 
                (keydown)="$event.stopPropagation()">
            </mat-form-field>
            <small></small>
          </mat-select>
        </mat-form-field>

Answer 3

这个问题已经被回答过了。这是使用自动完成功能的答案：Angular Material Autocomplete - How to allow user to add item not in suggested list?。 StackBlitz here。

如果要使用标准选择而不是自动完成，则将更加容易，因为您只需在列表中放置“其他”选项，并可以通过对话框对此进行特殊处理。自动完成示例中的某些技术也可能对选择有帮助。

带有创建选项的角度材料下拉菜单

3 个答案: