Блог

Я пытаюсь добавить проверку в форму моего приложения Angular.

Первый раздел моей формы содержит:

• 1 флажок
• 2 группы переключателей
• 1 кнопка (которая переходит к следующему разделу формы)

Кнопка должна быть отключена до тех пор, пока пользователь не установит флажок и не выберет опцию из обеих групп переключателей.

Вот код для моей кнопки:

 <button
    [disabled]="
        theChkAcceptTerms.invalid || 
        theInsuredType.invalid || 
        theReportInjury.invalid
        ">
  

И вот код для моего флажка:

 <checkbox
    id="accept"
    heading="I accept"
    name="accept"
    value="accept"
    [(ngModel)]="chkAcceptTerms"
    required
    #theChkAcceptTerms="ngModel">
</checkbox>
  

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

Однако, если я сниму флажок, кнопка не будет отключена.

Может кто-нибудь, пожалуйста, сказать мне, как я могу отключить указанную выше кнопку, если флажок не установлен. Большое спасибо!

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

 [disabled]="!checkBox || !radioGroup1 || !radioGroup2"
  

Посмотрите образец, который я создал ЗДЕСЬ

Я использовал ссылочную переменную шаблона, чтобы подключить мой флажок к отключенному состоянию кнопок:

 <mat-checkbox #confirmed>Yes, I confirm</mat-checkbox>
<button mat-button [disabled]="!confirmed.checked">Delete</button>
  

если theChkAcceptTerms является логической переменной, попробуйте с

 <button [disabled]="!theChkAcceptTerms || theInsuredType.invalid ||  theReportInjury.invalid">
  

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

 <button type="submit" [disabled]="!ngForm.valid">Submit</button>
  

или

  <button type="submit" [disabled]="ngForm.invalid">Submit</button>
  

Отредактировано
В вашем Html

  <div class="container">
    <h1>Hero Form</h1>
      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" class="form-control" id="name"
              required
              [(ngModel)]="ngForm.name" name="name">
      </div>

      <div class="form-group">
        <label for="alterEgo">Alter Ego</label>
        <input type="text"  class="form-control" id="alterEgo"
              [(ngModel)]="ngForm" name="alterEgo" (ngModelChange)="changed($event)" > 
      </div>

      <div class="form-group">
      <input type="checkbox" name="theInsuredType" value="theChkAcceptTerms"  [(ngModel)]="ngForm.theChkAcceptTerms"  (ngModelChange)="changed($event, 'theChkAcceptTerms')" > theChkAcceptTerms<br>
      <input type="checkbox" name="theInsuredType" value="theInsuredType"   [(ngModel)]="ngForm.theInsuredType" (ngModelChange)="changed($event, 'theInsuredType')"> theInsuredType<br>
      <input type="checkbox" name="theInsuredType" value="theReportInjury"  [(ngModel)]="ngForm.theReportInjury" (ngModelChange)="changed($event, 'theReportInjury')" > theReportInjury<br>
      <input type="checkbox" name="theInsuredType" value="oneMoreCondition"  [(ngModel)]="ngForm.oneMoreCondition" (ngModelChange)="changed($event, 'oneMoreCondition')" > theReportInjury<br>

      </div>


    <button type="submit" [disabled]="!canSubmit">Submit</button>


</div>


  

Затем в вашем файле component.ts

   theChkAcceptTerms: boolean;
  theInsuredType: boolean;
  theReportInjury: boolean;
  oneMoreCondition: boolean;
  canSubmit: boolean;
  ngForm = {}

  changed(status: boolean, control: string ){

    switch(control) { 
        case 'theChkAcceptTerms': { 
           this.theChkAcceptTerms = status
            break; 
        } 
        case 'theInsuredType': { 
            this.theChkAcceptTerms = status
            break; 
        } 
        case 'theReportInjury': { 
            this.theReportInjury = status
            break; 
        } 
        case 'oneMoreCondition': { 
           this.oneMoreCondition = status
            break; 
        } 
        default: { 
            break; 
        } 
    }
    if(this.theChkAcceptTerms amp;amp;  this.theChkAcceptTerms  amp;amp;   this.theReportInjury amp;amp;  this.oneMoreCondition){
      this.canSubmit = true;
    }else{
      this.canSubmit = false;
    }


  }