Угловой раскрывающийся материал с опцией создания

Question

Я использую угловой материал, чтобы создать опцию Dropdown of Religion.Но предложенные мною варианты могут не охватывать всю религию мира.Но я хочу дать возможность пользователю ввести свою религию в поле, если он не найден.Итак, что я хочу сделать, дать опцию с именем 'other option', и когда он щелкнет по этой опции, поле ввода будет передано опции, которая будет обрабатываться как значение 'formcontrolName' для поля.

Если вы предоставите код на Stackblitz, было бы здорово увидеть ясно.

Answer 1

Вы можете использовать ввод текста после или перед параметром mat, и вам может потребоваться исправить его 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 2

На этот вопрос уже был дан ответ.Вот ответ с использованием автозаполнения: Автозаполнение углового материала - Как разрешить пользователю добавлять элемент, отсутствующий в предложенном списке? .StackBlitz здесь .

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

Answer 3

Все просто,

1. Использовать mat-autocomplete
2. Добавьте событие (размытие) к входу, проверьте, не является ли значение пустой строкой а если его нет в опциях, добавьте в опции