Angular 9 - Изменить значение флажка на основе аутентификации

Question

У меня есть приложение в Angular, в котором у меня есть флажок, который требует проверки подлинности перед ее изменением. Идея здесь следующая:

• Флажок снят.
• Пользователь нажимает на этот флажок.
• Пользователь должен ввести данные аутентификации.
• Если аутентификация успешна, флажок становится установленным.
• Если аутентификация не успешна, флажок остается непроверенным.

Я пытался использовать preventDefault с обоими click и change события. Это предотвращает изменение, но не позволяет мне устанавливать его динамически. Я также попробовал следующее:

HTML:

<div class="pull-right">
    <input id="authenticate" type="checkbox" [(ngModel)]="IsAuthenticated" (ngModelChange)="CheckForAuthentication($event)"/>
    <label class="label" for="authenticate">
         <span>Authenticate</span>
    </label>
</div>

Машинопись:

@Component({
selector: 'app-authentication',
templateUrl: './authentication.component.html',
styleUrls: ['./authentication.component.scss']
})
export class AuthenticationComponent implements OnInit {
    IsAuthenticated: boolean = false;
    constructor(protected service: AuthenticationService) {}

    ngOnInit() {}

    async CheckForAuthentication(value: boolean) {
        // If we're unchecking don't do anything
        if (!value) {
            return;
        }

        // Remain false until authentication is complete
        this.IsAuthenticated = false;

        // Wait for authentication
        const authenticated = await this.service.Authenticate();

        // If authentication is true, change the checkbox
        this.IsAuthenticated = authenticated;
    }
}

Answer 1

Флажки немного хитры. Вам нужно изменить его checked свойство

HTML

<input id="authenticate" type="checkbox" #checkbox (change)="CheckForAuthentication(checkbox)" />

Машинопись

@Component({
    selector: 'app-authentication',
    templateUrl: './authentication.component.html',
    styleUrls: ['./authentication.component.scss']
})
export class AuthenticationComponent implements OnInit {
    constructor(protected service: AuthenticationService) { }

    private IsAuthenticated: boolean = false;

    ngOnInit() { }

    async CheckForAuthentication(checkbox: HTMLInputElement) {
        // If we're unchecking don't do anything
        if (!checkbox.checked) {
            return;
        }

        // Remain false until authentication is complete
        this.IsAuthenticated = false;
        checkbox.checked = false;

        // Wait for authentication
        const authenticated = await this.service.Authenticate();

        // If authentication is true, change the checkbox
        this.IsAuthenticated = authenticated;
        checkbox.checked = authenticated;
    }
}

Я использовал переменную шаблона, но это также можно сделать с помощью @ViewChild