Andrey
/
NIR-QR-code-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

phone number validation, success message

master
Andrey 2024-06-05 15:19:27 +03:00
parent 34b56c4dfc
commit 93255d56e7
2 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/app/request/request.component.html
View File

@ -3,7 +3,7 @@
</div> </div>
<div class="block" [style.display]="hidden?'none':'flex'"> <div class="block" [style.display]="hidden?'none':'flex'">
<form [formGroup]="feedbackForm"> <form *ngIf="!success" [formGroup]="feedbackForm">
<div class="card"> <div class="card">
<h3>Обратная связь</h3> <h3>Обратная связь</h3>
<button class="close" (click)="close()"> <button class="close" (click)="close()">
@ -40,4 +40,11 @@
</button> </button>
</div> </div>
</form> </form>
<div class="card" *ngIf="success">
<h3>Ваше обращение успешно отправлено. Вскоре мы с вами свяжемся.</h3>
<button class="btn white submit" (click)="close()">
ХОРОШО
</button>
</div>
</div> </div>

15
src/app/request/request.component.ts
View File

@ -2,16 +2,18 @@ import { Component, OnInit } from '@angular/core';
import { FormsService } from '../_services/forms.service'; import { FormsService } from '../_services/forms.service';
import {FormGroup, ReactiveFormsModule, FormBuilder, Validators} from "@angular/forms"; import {FormGroup, ReactiveFormsModule, FormBuilder, Validators} from "@angular/forms";
import {ActivatedRoute, Router} from "@angular/router"; import {ActivatedRoute, Router} from "@angular/router";
import {NgIf} from "@angular/common";
@Component({ @Component({
selector: 'request', selector: 'request',
standalone: true, standalone: true,
imports: [ReactiveFormsModule], imports: [ReactiveFormsModule, NgIf],
templateUrl: './request.component.html', templateUrl: './request.component.html',
styleUrl: './request.component.scss' styleUrl: './request.component.scss'
}) })
export class RequestComponent implements OnInit { export class RequestComponent implements OnInit {
public hidden = true; public hidden = true;
public success = false;
public feedbackForm: FormGroup; public feedbackForm: FormGroup;
public utmSource:string; public utmSource:string;
@ -37,8 +39,8 @@ export class RequestComponent implements OnInit {
Validators.required, Validators.required,
Validators.pattern( /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|.(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ ) Validators.pattern( /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|.(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ )
]], ]],
'feedback-number':[''], 'feedback-number':['', Validators.pattern(/^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/)],
'feedback-add-number':[''], 'feedback-add-number':['', Validators.pattern(/^[0-9]{1,6}$/)],
'feedback-message':['',Validators.required], 'feedback-message':['',Validators.required],
mailto:['test@nirgroup.ru'], mailto:['test@nirgroup.ru'],
type:['feedback-form-support'], type:['feedback-form-support'],
@ -52,18 +54,21 @@ export class RequestComponent implements OnInit {
open(){ open(){
this.hidden = false; this.hidden = false;
this.success = false;
this.ngOnInit() this.ngOnInit()
} }
close(){ close(){
this.feedbackForm.reset(); this.feedbackForm.reset();
this.hidden = true; this.hidden = true;
this.success = false;
} }
onSubmit(){ onSubmit(){
this.feedbackForm.markAllAsTouched(); this.feedbackForm.markAllAsTouched();
if (this.feedbackForm.valid) this.formsService.save('model', 'feedback-form-support', null, this.feedbackForm.value).subscribe(res => { if (this.feedbackForm.valid)
this.close() this.formsService.save('model', 'feedback-form-support', null, this.feedbackForm.value).subscribe(res => {
this.success = true;
}, error => { }, error => {
console.log(error); console.log(error);
}); });