угловое поле выбора 4 и кнопка отключения

Question

У меня есть поле выбора, и я хочу отключить кнопку при выборе первой опции.

<select>
  <option value="0">first option</option>
  <option value="1">second option</option>
  <option value="3">third option</option>
</select>

<button type="submit" class="primary">Submit</button>

Answer 1

Вам не нужно ничего кодировать в .ts для этого.

Попробуйте это

 <select #selectoption>
      <option value="0">first option</option>
      <option value="1">second option</option>
      <option value="3">third option</option>
  </select>

<button type="submit" class="primary" [disabled]="selectoption.value =='0'">Submit</button>

Answer 2

В вашей машинописной инициализации Select Модель похожа на

Select: any = '-1';

Теперь вы должны сделать в своем HTML, как это:

<select [(ngModel)]="Select">
  <option value="-1">--Select--</option>
  <option value="0">first option</option>
  <option value="1">second option</option>
  <option value="3">third option</option>
</select>

<button type="submit" class="primary" [disabled]="Select==0">Submit</button>

Вот рабочая демонстрация: Первый вариантОтключено

Надеюсь, это сработает для вас !!!

Answer 3

Хорошо, тогда,

Передайте

Чем в триггере:

<select (change)="checkValidation($event.target.value)">
  <option value="0">first option</option>
  <option value="1">second option</option>
  <option value="3">third option</option>
</select>

Функция:

 isValid: boolean = false;

 checkValidation(value:any):void{
  console.log(value);
   if(value == 0){
     this.isValid=false;
   }
   else{
     this.isValid=true;
   }
 }

Вы можете найти рабочийпример здесь

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

Answer 4

Следующий код отключит кнопку отправки при выборе первой опции

В вашем HTML файле

<select [(ngModel)]="dropdownValue" (ngModelChange)="disableButton($event)">
  <option value="first">first option</option>
  <option value="second">second option</option>
  <option value="third">third option</option>
</select>
<button type="submit" class="primary" [disabled]=disableButtonMode>Submit</button>

TS файле

export class AppComponent  {
  name = 'Angular 6';
  dropdownValue:string;
  disableButtonMode:boolean=false;
  disableButton(){
    console.log(this.dropdownValue);
    if(this.dropdownValue=='first'){
  this.disableButtonMode=true;
    }
    else{
        this.disableButtonMode=false;
    }
  }
}

Для справки используйте следующую ссылку для проверки кода