How to bind the readonly property to input, which will depend on the checkbox?

Good day!

I try to make a reactive form in which one of the inputs can have a readonly property depending on the state of the checkbox - if the checkbox is selected, the input is available for entering text, if not selected, input readonly.

Component:

import {FormControl, FormGroup, Validators} from "@angular/forms"; @Component({ selector: 'app-add-topic', templateUrl: './add-topic.component.html', styleUrls: ['./add-topic.component.css'] }) export class AddTopicComponent implements OnInit { constructor() { } addTopicForm: FormGroup; ngOnInit() { this.initForm(); } initForm(): void { this.addTopicForm = new FormGroup({ 'tabName': new FormControl(null, Validators.required), 'indicatorName': new FormControl(null, Validators.required) }); } } 

Template:

 <form class="addTopic modal" [formGroup]="addTopicForm"> <div class="project-label">Добавление топика</div> <div class="controls form-group"> <label for="tabName">Название</label> <input type="text" id="tabName" formControlName="tabName"> <label for="indicatorName">Индикатор</label> <span><input type="checkbox" id="isIndicator" #isInd checked></span> <input type="text" id="indicatorName" [readonly]="!isInd.checked" formControlName="indicatorName"> </div> </form> 

Actually, it seems to work this way, but the readonly property is set from the noodle through time (regardless of the state of the checkbox, it is necessary to change the state of the checkbox several times and even push it itself so that it has the desired property). What am I doing wrong?