需要Angular 9复选框身份验证

问题描述 投票:0回答:1

我在Angular中有一个应用程序,其中有一个复选框,需要它进行更改才能进行身份验证。这里的想法如下:

  • 未选中该复选框。
  • 用户单击复选框。
  • 要求用户输入验证详细信息。
  • 如果身份验证成功,则该复选框为选中状态。
  • 如果认证不成功,则该复选框保持未选中状态。

我尝试将preventDefaultclick事件都使用。它可以阻止更改,但不允许我动态设置。我也尝试了以下方法:

HTML:

change

Typescript:

<div class="pull-right">
    <input id="authenticate" type="checkbox" [(ngModel)]="IsAuthenticated" (ngModelChange)="CheckForAuthentication($event)"/>
    <label class="label" for="authenticate">
         <span>Authenticate</span>
    </label>
</div>
javascript html angular
1个回答
0
投票

使用getter / setter轻松完成

HTML

@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;
    }
}

打字稿

<div class="pull-right">
<input id="authenticate" type="checkbox" [(ngModel)]="IsAuthenticated" />
<label class="label" for="authenticate">
     <span>Authenticate</span>
</label>
© www.soinside.com 2019 - 2024. All rights reserved.