Я создаю базовый пример приложения для регистрации пользователей с базовыми учетными данными. Я пытаюсь сбросить форму, когда нажимаю кнопку «Отмена». Однако я не могу этого сделать.Я написал функцию сброса, но почему-то она не вызывается. Я не могу понять, в чем дело. Пожалуйста, помогите. Заранее спасибо
Мой код TS:
ngOnInit()
{
this.addForm = this.formBuilder.group({
id: [],
userName: ['', Validators.required],
password:new FormControl( '',[ Validators.required]),
passwordAgain: new FormControl('',[ Validators.required]),
userRole:['',Validators.required],
},{ validator: RepeatPasswordValidator });
}
onSubmit() {
if (this.addForm.valid)
{
this.userService.createUser(this.addForm.value)
.subscribe( data => {
//this.router.navigate(['adduser']);
});
this.snackBar.open("message", "action", {
duration: 2000,
});
alert("User created");
}
window.location.reload();
}
changeClient(value) {
}
resetForm()
{
this.addForm.reset();
}
Вотмой шаблон:
<div style="height: 100vh" fxLayout="column" fxLayoutAlign="center center" >
<mat-toolbar>
<span>Registration</span>
</mat-toolbar>
<mat-card>
<mat-card-content>
<form [formGroup]="addForm" class="login-form" (ngSubmit)="onSubmit()">
<div class="form-group">
<mat-form-field class="example-full-width">
<input matInput type="text" formControlName="userName" placeholder="userName" name="userName" class="form-control" id="userName">
</mat-form-field>
</div>
<div class="form-group">
<mat-form-field class="example-full-width">
<input matInput type="password" formControlName="password" placeholder="Password" name="password" class="form-control" id="password">
<mat-error *ngIf="addForm.controls.password.hasError('required')" >Passwords can't be empty</mat-error>
</mat-form-field>
</div>
<div class="form-field">
<mat-form-field>
<input matInput formControlName="passwordAgain" placeholder="Confirm the password" type="password" [errorStateMatcher]="passwordsMatcher">
<mat-error *ngIf="addForm.hasError('passwordsNotEqual')" >Passwords are different. They should be equal!</mat-error>
</mat-form-field>
</div>
<mat-form-field>
<mat-select placeholder="Roles" formControlName="userRole" id="userRole" (selectionChange)="changeClient($event.value)" [(value)]="selected">
<mat-option value="Admin">Admin</mat-option>
</mat-select>
</mat-form-field>
<div class="container" style="margin: 12px" fxLayout="row" fxLayoutAlign="center center">
<button mat-raised-button color="primary">Create</button>
<button mat-raised-button (click)= 'resetForm()' color="primary">Cancel</button>
</div>
</form>
</mat-card-content>
</mat-card>
</div>