Angular Material использует проверенный статус флажка как основание только для чтения другого элемента управления в группе форм

Question

Я новичок в работе с angular, и я хотел использовать проверенный статус флажка в качестве основы для свойства только для чтения textarea.

<div fxlayout="row" fxLayoutAlign="center center" *ngFor="let test of cosmetriTests.controls; let i=index" [formGroupName]="i">
 <mat-form-field class="w-25-p" appearance="outline" >
      <textarea [id]="'actualCoaField_'+i"
          matInput
          formControlName="actual_coa_qualifier"
          (keyup) = "evaluateCoa()"
          [readonly] = "test.checked.include==false"
          required>
      </textarea>
 </mat-form-field>

 <mat-checkbox
     formControlname="include"
     [checked]="true"
     [required]="true"
 </mat-checkbox>
</div>

Заранее спасибо, ребята.

Answer 1

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

Мой код ts:

readOnlyTextArea = true;
textAreaReadonly( value ) {
  this.readOnlyTextArea = !this.readOnlyTextArea;
}

Мой код Html:

<mat-form-field class="example-full-width">
      <textarea [readonly] = "readOnlyTextArea" matInput placeholder="Leave a 
      comment"></textarea>

</mat-form-field>
<mat-checkbox color="primary" formControlname="include" [checked]="true" 
       (change)="textAreaReadonly($event)" [required]="true">Checkbox
</mat-checkbox>

Answer 2

Вы можете использовать ngModel для двухсторонней привязки данных.

 <mat-form-field class="w-25-p" appearance="outline" >
          <textarea [id]="actualCoaField"
              matInput
              (keyup) = "evaluateCoa()"
              [readonly] = "!isCheckboxChecked"
              required>
          </textarea>
     </mat-form-field>

    <mat-checkbox [(ngModel)]="isCheckboxChecked"
         (change)="checked()"
         [required]="true">
     </mat-checkbox>

Теперь в зависимости от состояния флажка будет включена / отключена текстовая область.

Создан блик стека https://stackblitz.com/edit/angular-8fuu3p?file=app/checkbox-overview-example.html

Answer 3

Измените код на [readonly] = "test.include.value==false" и проверьте, работает ли он

<div fxlayout="row" fxLayoutAlign="center center" *ngFor="let test of cosmetriTests.controls; let i=index" [formGroupName]="i">
 <mat-form-field class="w-25-p" appearance="outline" >
      <textarea [id]="'actualCoaField_'+i"
          matInput
          formControlName="actual_coa_qualifier"
          (keyup) = "evaluateCoa()"
          [readonly] = "test.checked.include==false"
          required>
      </textarea>
 </mat-form-field>

 <mat-checkbox
     formControlname="include"
     [checked]="true"
     [required]="true"
 </mat-checkbox>
</div>

Answer 4

Не имея материала под рукой, я просто попробовал с прямым углом и получил это:

        <textarea [id]="'actualCoaField_'+i"
             matInput
             [disabled]="!myCheckbox.checked"
         >
         </textarea>

         <input type="checkbox"
             #myCheckbox
             (change)="true"
         />

Несколько замечаний:

1) #myCheckbox НЕ нужнобыть дополненным индексом цикла, поскольку имена шаблонов являются локальными для их области (и * ngFor создает новый шаблон ng на каждой итерации), и

2) На первый взгляд, ненужный (change)=true фактически необходим,поскольку он убеждает Angular выполнить обновление экрана.