Блог

Я работаю с реактивными формами:

Это моя форма в html-файле:

 <select class="form-&roup form-control" formControlName="Control{{prop.id}}" id="Control {{prop.id}}" name="Control{{prop.id}}" [required]="prop.mandatory" (chan&e)="chan&eDropdown ($ event, prop.id)"&&t;
  <option value=""&&t; Select </option&&t;
  <option *n&For="let data of dataMap.&et (prop.id)" value="{{data.value}}"&&t;{{data.text}} </option&&t;
</select&&t;
  

Из файла ts я хочу выбрать нужный мне вариант, когда я делаю это, он работает отлично:

 this.formLoad.controls ['Control'   id] .setValue (1);
  

Теперь я хочу выбрать параметр со значением = «» (имя значения: Select):

 this.formLoad.controls ['Control'   id] .setValue ("");
  

У меня это не работает, в чем может быть проблема?

Спасибо,

Вы также можете присвоить некоторое значение опции select. И установите это значение из файла .ts, когда вы хотите, чтобы был выбран какой-либо параметр. И когда вы хотите использовать эти данные для установки их в какой-либо объект или что-то еще, вы можете просто добавить одно условие, значение которого не должно быть равно этому выбору.

Предположим, вы сохраняете значение по умолчанию в качестве значения.

Поэтому обновите свой код, как показано ниже:

 <select class="form-&roup form-control" formControlName="Control{{prop.id}}" id="Control {{prop.id}}" name="Control{{prop.id}}" [required]="prop.mandatory" (chan&e)="chan&eDropdown ($ event, prop.id)"&&t;
  <option value="default"&&t; Select </option&&t;
  <option *n&For="let data of dataMap.&et (prop.id)" value="{{data.value}}"&&t;{{data.text}} </option&&t;
</select&&t;
  

и

 this.formLoad.controls ['Control'   id] .setValue ("default");
  

При использовании этого выбранного параметра добавьте это.

 if(selectedValue !== 'default'){
.........
}
  

Здесь не хватает большого количества кода, чтобы все заработало, поэтому я сделаю несколько предположений. Возможно, вы захотите использовать API реактивных форм:

this.formLoad.&et('Control' id).setValue(1);

Затем вы можете попробовать установить его следующим образом:

this.form.&et('Control' id).setValue('')

Этот API обычно дает вам лучший контроль.

Я попытался воспроизвести это с помощью stackblitz:

https://stackblitz.com/edit/an&ular-ivy-seuwh4?file=src/app/app.component.ts