如何基于单选按钮加载角度组件

问题描述

我正在学习Angular.我使用Angular反应形式来实现我的形式.我想显示基于所选单选按钮的登录按钮或注册组件.

I'm learning currently Angular. I use the Angular reactive form to implement my forms. I want to display the login button or registration component based on the selected radio button.

export class IdentificationComponent implements OnInit {

  identificationForm: FormGroup;
  yesNo: boolean[] = [true, false];
  hasAccount: boolean = true;

  constructor(private _announcementService: AnnouncementService) { }

  ngOnInit(): void {
    this.identificationForm = new FormGroup({
      'hasAccount': new FormControl(this.hasAccount, Validators.required)
    });
  }

  changeIdentificationType(event: any){
   this.hasAccount = event.target.value;
  }
}

此处是模板

<form [formGroup]="identificationForm">
  <label>Do you already have an account?</label>
  <label *ngFor="let v of yesNo">
    <span *ngIf="v; else no">Yes</span>
    <input type="radio" name="hasAccount" [value]="v" (change)="changeIdentificationType($event)">
  </label>
</form>

<div *ngIf="hasAccount; else registration">
  <app-login></app-login>
</div>

<ng-template #registration>
  <app-registration></app-registration>
</ng-template>

<ng-template #no>No</ng-template>

不幸的是，选择单选按钮时会发生提示.如何基于单选按钮加载或仅显示特定组件?

Unfortunately, When selecting the radio button noting happens. How to load or show only the specific component based on the radio button?

推荐答案

演示使用数字1 0，而不是 hasAccount

Demo You can use number 1 0 rather then true false for hasAccount

<div *ngIf="hasAccount==1; else registration">

这篇关于如何基于单选按钮加载角度组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！