I am currently facing an issue with two radio buttons. What I want is for the admin radio button to display one form when clicked, and the user radio button to display another form. Currently, both are checked by default and I am unsure why. I only want one to be checked initially, showing one form at a time.
- Below, I will provide the code for the radios and an image of them. I am utilizing
angular-material.
Radio button's HTML
<mat-radio-group aria-label="Select an option" class="center">
<mat-radio-button (click)="radio_btn=true" >Admin</mat-radio-button>
<mat-radio-button (click)="radio_btn=false">User</mat-radio-button>
</mat-radio-group>
<div class="ng-container ">
<div class="row justify-content-center" *ngIf="radio_btn==true">
<form class="example-form " [formGroup]="signupForm" (ngSubmit)="send(signupForm)">
<mat-form-field class="example-full-width">
<input matInput formControlName="email" placeholder="User" type="email">
</mat-form-field><br>
<div *ngIf="signupForm.get('email').hasError('email') && signupForm.get('email').touched">Introduce an email</div><br>
<mat-form-field class="example-full-width">
<input matInput formControlName="password" placeholder="Password" type="password">
</mat-form-field><br>
<div *ngIf="signupForm.get('password').hasError('password') && signupForm.get('password').touched">Introduce the correctly password</div><br>
<button mat-raised-button [disabled]="signupForm.invalid" class="colour_button " type="submit">Register</button>
</form>
</div>
</div>
TS file for the radios
export class HomeComponent implements OnInit {
radio_btn:boolean = true;
ngOnInit(): void {
}
}
This is how they appear: