Без использования формы для проверки Как отключить кнопку в угловом поле, если поле <input> пусто

Question

Я пытаюсь сделать @output в angular для этого у меня есть поле ввода с кнопкой, я отправлю данные поля ввода родителю с помощью @output() Я хочу отключить кнопку, если поле ввода пусто, Как я могу отключить без использования проверки формы.

Я пробовал этот код

  <input type="text" [(ngModel)] = "childInput" >
  <button [disabled] ="!childInput.value" (click)="sendToParent()">Send To Parent</button>

но кнопка остается отключенной, если поле ввода пустое или нет.

PS Я нашел ответ с проверкой формы, но я не хотел делать с проверкой формы или определением переменной bool

Answer 1

Этот код будет работать

<input type="text" [(ngModel)] = "childInput" >
<button [disabled] ="!childInput" (click)="sendToParent()">Send To Parent</button>

Answer 2

Если вы не хотите использовать ngModel:

<input type="text" #childInput >
<button [disabled]="!childInput.value.length>0" (click)="sendToParent()">Send To Parent</button>

Answer 3

Я использовал этот код, но не работает с моей ступенчатой ​​формой;

            <!-- Step 6 -->
            <div id="step-6" class="p-5 animated slideInRight" style="display: none;">
                <div class="app-inner">
                    <h3 class="mb-5">Are You Old Enough to Get Financing?</h3>
                    <div class="app-row">
                        <div class="app-list-wrap">
                            <div class="app-list-wrap-inner">
                                <div class="app-list text-center">
                                    <label class="label-text">Date of Birth</label><span id="error" style="color: red;"></span>
                                    <div data-step="6" class="custom-box app-input-container dob">
                                        <input name="dob" type="date" id="dob" placeholder="DD / MM / YYYY" [(ngModel)] = "childInput">
                                    </div>
                                    <span class="app-input-hint">DD / MM / YYYY</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="app-btn-wrap">
                    <button data-step="5" class="app-btn prev">Previous</button>
                   <button data-step="7" class="app-btn next" id="dateOfBirthValidation" [disabled] ="!childInput" (click)="sendToParent()">Continue</button>
                </div>
                <div class="button-btm-text">
                    To be eligible to submit an application, you must be 18 or older.
                </div>
            </div>

Вот jquery для ступенчатой ​​формы

  $('.next').click(function () {
      var pgrbar = $('.progress-bar').width();
      var nextStep = $(this).data('step');
      var currentStep = nextStep - 1;
      var pgrbar = nextStep * 5.56;
      $('.progress-bar').width(pgrbar + '%');

      $('#step-' + currentStep).hide();

      $('#step-' + nextStep).show();
      $('#step-' + nextStep).removeClass("slideInLeft").addClass("slideInRight");
  });

  $('.prev').click(function () {
      var pgrbar = $('.progress-bar').width();
      var prevStep = $(this).data('step');
      var currentStep = prevStep + 1;
      var pgrbar = prevStep * 5.56;
      $('.progress-bar').width(pgrbar + '%');
      $('#step-' + currentStep).hide();
      $('#step-' + prevStep).show();
      $('#step-' + prevStep).removeClass("slideInRight").addClass("slideInLeft");
  });