Angular 9-基于身份验证更改复选框值
我在Angular中有一个应用程序,其中有一个复选框,需要在更改前进行身份验证。这里的想法如下:Angular 9-基于身份验证更改复选框值,angular,Angular,我在Angular中有一个应用程序,其中有一个复选框,需要在更改前进行身份验证。这里的想法如下: 复选框未选中 用户单击复选框 用户需要输入身份验证详细信息 如果身份验证成功,则复选框变为选中状态 如果身份验证未成功,则复选框保持未选中状态 我尝试将preventDefault与click和change事件一起使用。它阻止更改,但不允许我动态设置。我还尝试了以下方法: HTML: <div class="pull-right"> <input id="authent
- 复选框未选中
- 用户单击复选框
- 用户需要输入身份验证详细信息
- 如果身份验证成功,则复选框变为选中状态
- 如果身份验证未成功,则复选框保持未选中状态
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;
}
}
复选框有点棘手。您需要更改其
checked
属性
HTML
<input id="authenticate" type="checkbox" #checkbox (change)="CheckForAuthentication(checkbox)" />