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

Question

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

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

HTML-код флажка приведен ниже. Я пробовал [disabled] = "form.invalid",Когда я использую его таким образом, флажок отключается и появляется сообщение об ошибке.

Кроме того, я попробовал этот подход, добавив функцию [disabled] = "! AreDetailsInvalid ()" в файле .ts.

 public updateValidity(_event: Event) {
    setTimeout(() => {
        this.formIsValid = this.form.valid;
    }, 0);
}
 public areDetailsInvalid()
{
    return this.formIsValid;
}   


<mat-checkbox disableRipple class="head checkboxlabel mat-warn" [checked]="saveAsCheckbox" [disabled]="!areDetailsInvalid()" (change)="toggleSaveAs()">
                                        <span class="save-as-checkbox-label">Check to save {{saveAsLabel}} information</span>
                                    </mat-checkbox>

Флажок отключен, если форма недействительна. Но не включается снова, если форма действительна.

Answer 1

Надеюсь, этот пример поможет вам.

Дайте мне знать, если это решит вашу проблему.

Stackblitz => https://stackblitz.com/edit/angular-enhthy