phone number validation, success message

src/app/request/request.component.html

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

src/app/request/request.component.ts

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