My HTML file:
<div class="main-wrapper" fxLayout="row" fxLayoutAlign="center center">
<mat-card class="box">
<mat-card-header>
<mat-card-title>Register</mat-card-title>
</mat-card-header>
<form [formGroup]="registerForm" (ngSubmit)="onSubmit()" novalidate>
<!-- Username -->
<mat-card-content>
<mat-form-field class="example-full-width">
<input matInput placeholder="Username" ngModel name="username" minlength="5"
formControlName="username" required [readOnly]="!enableEdit">
</mat-form-field>
<mat-error *ngIf="username.touched && !username.valid">
<div *ngIf="username.errors.required">Username is required.</div>
<div *ngIf="username.errors.minlength">Username should be minimum 5 characters.</div>
</mat-error>
<!-- Email -->
<mat-form-field class="example-full-width">
<input matInput placeholder="Email" ngModel name="email" minlength="5" [pattern]="emailPattern"
formControlName="email" required [readOnly]="!enableEdit">
</mat-form-field>
<mat-error *ngIf="email.touched && !email.valid">
<div *ngIf="email.errors.required">Email is required.</div>
<div *ngIf="email.errors.pattern">Email is not valid.</div>
</mat-error>
<!-- Password -->
<mat-form-field class="example-full-width">
<input matInput placeholder="Password" ngModel name="password" minlength="5"
formControlName="password" required [readOnly]="!enableEdit">
</mat-form-field>
<mat-error *ngIf="password.touched && !password.valid">
<div *ngIf="password.errors.required">Password is required.</div>
<div *ngIf="password.errors.minlength">Password should be minimum 5 characters.</div>
</mat-error>
<!-- Repeat Password -->
<mat-form-field class="example-full-width">
<input matInput placeholder="Confirm Password" ngModel name="confirmpassword" formControlName="confirmpassword"
required [readOnly]="!enableEdit">
</mat-form-field>
<mat-error *ngIf="confirmpassword.touched && confirmpassword.value != password.value"> Passwords do not match
</mat-error>
<ng-select [items]="items" bindLabel="name" ngModel name="dropdown" formControlName="dropdown" required [disabled]="!enableEdit"></ng-select>
<div *ngIf="!dropdown" class="invalid-feedback">Dropdown is required</div>
</mat-card-content>
<button mat-button color="primary" class="btn-block" (click)="enableEdit = !enableEdit">Edit</button>
<button mat-button color="primary" class="btn-block" type="submit" [disabled]="!registerForm.valid">Register</button>
</form>
</mat-card>
My Typescript file:
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-register-form',
templateUrl: './register-form.component.html',
styleUrls: ['./register-form.component.css']
})
export class RegisterFormComponent implements OnInit {
emailPattern = "^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$"; //Pattern to check if email is correct
registerForm;
enabledEdit = false;
constructor(private formBuilder: FormBuilder) {}
ngOnInit() {
this.registerForm = this.formBuilder.group({
username: [''],
email: [''],
password: [''],
confirmpassword: [''],
dropdown:['']
});
}
items = [
{
id: 1,
name: 'Option 1'
},
{
id: 2,
name: 'Option 2'
}, {
id: 3,
name: 'Option 3'
}, {
id: 4,
name: 'Option 4'
},
]
get username() {
return this.registerForm.get('username');
}
get email() {
return this.registerForm.get('email');
}
get password() {
return this.registerForm.get('password');
}
get confirmpassword() {
return this.registerForm.get('confirmpassword');
}
get dropdown() {
return this.registerForm.get('dropdown');
}
onSubmit() {
console.log(this.registerForm.value)
}
}
All inputs and dropdown should be blocked (no possibility to write or select options) until you press the Edit button.
Why is it not working?
How can I achieve having only an Edit button that transforms into a Register button upon being clicked?