Флажок для обновления на основе другого флажка Материал

Question

У меня есть два флажка материала и несколько делений на странице, как эта

 <mat-checkbox labelPosition="after"
            (change)="myChangeRequest.budgetChecked=!myChangeRequest.budgetChecked"  >Budget Change
          </mat-checkbox>
          <mat-checkbox labelPosition="after"
            (change)="myChangeRequest.drawdownChecked= !myChangeRequest.drawdownChecked">Drawdown Date
          </mat-checkbox>

HTML

Я пытаюсь реализовать

Когда просадка проверено, бюджет также должен быть проверен автоматически, если его нет. Но когда кто-то проверяет бюджет, это не влияет на просадку. Кроме того, когда снятие средств снимает флажок, нет необходимости снимать флажок.

Так что я сделал

          <mat-checkbox labelPosition="after"
            (change)="myChangeRequest.drawdownChecked= !myChangeRequest.drawdownChecked;myChangeRequest.budgetChecked=true">Drawdown Date
          </mat-checkbox>

Так как я новичок ie с Angular, я не уверен это хорошо или правильно, или это хорошо использовать двустороннее связывание с помощью [(ngModel)], или это не работает для этой цели.

Answer 1

Материал (вход или флажок) может использоваться с [(ngModel)] или для использования в Реактивных формах с использованием formControlName-, а в случае с мат-флажком вы также можете использовать (изменить)

В Angular в случае, когда у вас всегда есть аргумент $event, поэтому вы можете использовать такие, как

<mat-checkbox labelPosition="after" [(ngModel)]="myChangeRequest.budgetChecked">
  Budget Change
</mat-checkbox>
<mat-checkbox labelPosition="after" [(ngModel)]="myChangeRequest.drawdownChecked"
     (change)="drawDownChange($event)">Drawdown Date
</mat-checkbox>

в .ts, вы создаете функцию

drawDownChange(event:any)
{
    if (event.checked)
         this.myChangeRequest.budgetChecked=true;
}

в mat-checkbox событие возвращает объект, а свойство «флажок» имеет значение true или false. (вы можете увидеть в документах, что это объект типа MatCheckboxChange . При обычном вводе (input)="myFunction($event)" аргумент - это значение ввода

ПРИМЕЧАНИЕ: Вы можете использовать только. html в пути

<mat-checkbox labelPosition="after" [(ngModel)]="myChangeRequest.drawdownChecked"
     (change)="$event.checked && myChangeRequest.budgetChecked=true">Drawdown Date
</mat-checkbox>