Как загрузить компонент Angular в зависимости от выбранного переключателем

Question

Я сейчас учусь Angular. Я использую реактивную форму Angular для реализации своих форм. Я хочу отобразить кнопку входа или компонент регистрации на основе выбранного переключателя.

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>

К сожалению, при выборе переключателя происходит отметка. Как загрузить или показать только указанный компонент c на основе переключателя?

Answer 1

Демо Вы можете использовать номер 1 0 вместо true false для hasAccount

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

Answer 2

Ссылка на него в шаблоне с помощью identityForm.get ('hasAccount'). Value:

<div *ngIf="identificationForm.get('hasAccount').value; else registration">

РЕДАКТИРОВАТЬ: Когда вы определяете свой formControl, не заключайте имя элемента в кавычки. (примечание: hasAccount )

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