[1078] refactor organization-contact to reactive-form

frontend/src/app/components/organization/organization-contact/organization-contact.component.html

@@ -1,91 +1,41 @@
 <div class="container">
   <h2>Formularz kontaktowy</h2>
-  <div *ngIf="!alertSuccessClosed">
-  <ngb-alert type="success" (close)="alertSuccessClosed = true">
+
+  <ngb-alert *ngIf="success === true" type="success" (close)="success = null">
     Twoja wiadomość została wysłana. <strong>Dziękujemy!</strong>
   </ngb-alert>
-  </div>
-  <div *ngIf="!alertErrorClosed">
-  <ngb-alert type="danger" (close)="alertErrorClosed = true">
+  <ngb-alert *ngIf="success === false" type="danger" (close)="success = null">
     Przesłano niepoprawne dane.
   </ngb-alert>
-  </div>
-  <form (ngSubmit)="onSubmit()" #contactForm="ngForm">
+
+  <form id="organization_contact_form" [formGroup]="fg">
     <div class="form-group row">
-      <label for="id_name" class="col-md-2 col-form-label">Twoje imię i nazwisko</label>
+      <label for="name" class="col-md-2 col-form-label">Twoje imię i nazwisko</label>
       <div class="col-md-4">
-        <input
-          type="text"
-          name="name"
-          class="form-control form-control-lg"
-          [ngClass]="{'is-invalid': name.invalid && name.touched}"
-          id="id_name"
-          [ngModel]="getFullName(user$ | async)"
-          required
-          minlength="2"
-          maxlength="150"
-          #name="ngModel" />
-        <div
-          class="invalid-feedback"
-          *ngIf="name.invalid && name.touched">Proszę podać imię i nazwisko</div>
+        <input type="text" class="form-control" id="name" placeholder="Imię i nazwisko" formControlName="name">
+        <volontulo-form-error [fc]="fg.controls.name" [minLength]="3" [maxLength]="30" [customError]="'Proszę podać imię i nazwisko'"></volontulo-form-error>
       </div>
     </div>
     <div class="form-group row">
-      <label class="col-md-2 col-form-label" for="id_email">Twój email</label>
+      <label class="col-md-2 col-form-label" for="email">Twój email</label>
       <div class="col-md-4">
-        <input
-          type="email"
-          name="email"
-          class="form-control form-control-lg"
-          [ngClass]="{'is-invalid': email.invalid && email.touched}"
-          id="id_email"
-          [ngModel]="(user$ | async).email"
-          required
-          maxlength="150"
-          email
-          pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,})+$"
-          #email="ngModel" />
-        <div
-          class="invalid-feedback"
-          *ngIf="email.invalid && email.touched">Proszę podać adres email w poprawnym formacie.</div>
+        <input type="text" class="form-control" id="email" placeholder="email" formControlName="email"/>
+        <volontulo-form-error [fc]="fg.controls.email"></volontulo-form-error>
       </div>
-      <label class="col-md-2 col-form-label" for="id_phone_no">Telefon</label>
+      <label class="col-md-2 col-form-label" for="phone_no">Telefon</label>
       <div class="col-md-4">
-        <input
-          type="tel"
-          name="phone_no"
-          class="form-control form-control-lg"
-          [ngClass]="{'is-invalid': phoneNo.invalid && phoneNo.touched}"
-          id="id_phone_no"
-          [ngModel]="(user$ | async).phoneNo"
-          required
-          minlength="9"
-          maxlength="15"
-          #phoneNo="ngModel"
-          [imask]="{mask: '+48 000-000-000'}"
-          [unmask]="true"/>
-        <div
-          class="invalid-feedback"
-          *ngIf="phoneNo.invalid && phoneNo.touched">Proszę podać numer telefonu.</div>
+        <input type="text" class="form-control" id="phone_no" placeholder="Numer telefonu"
+        formControlName="phone_no"
+        [imask]="{mask: '+48 000-000-000'}"
+        [unmask]="true">
+        <volontulo-form-error [fc]="fg.controls.phone_no" [minLength]="9" [customError]="'Wprowadź poprawny numer np. +48 111-222-333'"></volontulo-form-error>
       </div>
     </div>
       <div class="form-group row">
-        <label class="col-md-2 col-form-label" for="id_message">Opis</label>
+        <label class="col-md-2 col-form-label" for="message">Opis</label>
         <div class="col-md-10">
-          <textarea
-            name="message"
-            class="form-control"
-            [ngClass]="{'is-invalid': message.invalid && message.touched}"
-            rows="5"
-            id="id_message"
-            ngModel
-            required
-            minlength="2"
-            #message="ngModel">
-          </textarea>
-          <div
-          class="invalid-feedback"
-          *ngIf="message.invalid && message.touched">Wiadomość nie może być pusta.</div>
+          <textarea class="form-control" rows="5" id="message" formControlName="message"></textarea>
+          <volontulo-form-error [fc]="fg.controls.message" [minLength]="10" [maxLength]="2000"></volontulo-form-error>
         </div>
       </div>
     <div class="form-group row d-none">
@@ -94,19 +44,19 @@ <h2>Formularz kontaktowy</h2>
         <input
           type="text"
           id="id_honey"
-          ngModel
-          name="honeyBunny"
+          formControlName="honeyBunny"
           class="form-control"
-          #honeyBunny="ngModel" />
+          />
       </div>
     </div>
     <div class="form-group row">
       <div class="col-md-9 offset-md-3">
         <button
-          type="submit"
-          name="submit"
-          class="btn btn-primary"
-          [disabled]="contactForm.invalid || submitDisabled">
+        [disabled]="fg.invalid || submitDisabled"
+        type="submit"
+        name="submit"
+        class="btn btn-primary"
+        (click)="onSubmit()">
           Wyślij
         </button>
       </div>

frontend/src/app/components/organization/organization-contact/organization-contact.component.scss

@@ -4,6 +4,9 @@ label {
   font-weight: 700;
   text-align: right;
 }
+button {
+  cursor: pointer;
+}
 @include media-breakpoint-down(sm) {
   label {
     text-align: left;

frontend/src/app/components/organization/organization-contact/organization-contact.component.ts

@@ -1,44 +1,71 @@
-import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, ViewChild } from '@angular/core';
-import { NgForm } from '@angular/forms';
+import { Component, OnInit, OnChanges, SimpleChanges, EventEmitter, Output, Input } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+
 import { Observable } from 'rxjs/Observable';
+import { filter, take } from 'rxjs/operators';
 
-import { ContactStatus, OrganizationContactPayload } from 'app/models/organization.model';
-import { User } from 'app/models/user.model';
+import { OrganizationContactPayload, ContactStatus } from 'app/models/organization.model';
 import { AuthService } from 'app/services/auth.service';
+import { User } from 'app/models/user.model';
 import { UserService } from 'app/services/user.service';
 
 @Component({
   selector: 'volontulo-organization-contact',
   templateUrl: './organization-contact.component.html',
   styleUrls: ['./organization-contact.component.scss']
 })
-export class OrganizationContactComponent implements OnChanges {
-  @ViewChild('contactForm') contactForm: NgForm;
-  @Output() contact = new EventEmitter<OrganizationContactPayload>();
+
+export class OrganizationContactComponent implements OnInit, OnChanges {
   @Input() contactStatus: ContactStatus;
+  @Output() contact = new EventEmitter<OrganizationContactPayload>();
   submitDisabled = false;
-  alertSuccessClosed = true;
-  alertErrorClosed = true;
   user$: Observable<User> = this.authService.user$;
   getFullName = this.userService.getFullName;
 
-  constructor(private authService: AuthService, private userService: UserService) {
+  public fg: FormGroup = this.fb.group({
+    name: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(30)]],
+    email: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(30), Validators.email]],
+    phone_no: ['', [Validators.required, Validators.minLength(9), Validators.maxLength(9), Validators.pattern(/^[0-9]{9}$/)]],
+    message: ['', [Validators.required, Validators.minLength(10), Validators.maxLength(2000)]],
+    honeyBunny: ['']
+  });
+  public success: null | boolean = null;
+
+
+  constructor(
+    private fb: FormBuilder,
+    private authService: AuthService,
+    private userService: UserService
+  ) { }
+
+  ngOnInit() {
+    this.user$
+    .pipe(
+      filter(user => user !== null),
+      take(1),
+    )
+    .subscribe(user => {
+      this.fg.controls.name.setValue(this.getFullName(user));
+      this.fg.controls.email.setValue(user.email);
+      this.fg.controls.phone_no.setValue(user.phoneNo);
+      });
   }
 
   ngOnChanges(changes: SimpleChanges) {
     if (changes.contactStatus.currentValue && changes.contactStatus.currentValue.status === 'success') {
-      this.alertSuccessClosed = false;
-      this.contactForm.reset();
+      this.success = true;
+      this.fg.controls.message.reset();
     } else if (changes.contactStatus.currentValue && changes.contactStatus.currentValue.status === 'error') {
-      this.alertErrorClosed = false;
+      this.success = false;
     }
     this.submitDisabled = false;
   }
 
   onSubmit() {
-    if (!this.contactForm.value.honeyBunny) {
-      this.contact.emit(this.contactForm.value as OrganizationContactPayload);
+    if (this.fg.valid && !this.fg.value.honeyBunny) {
       this.submitDisabled = true;
+      delete this.fg.value.honeyBunny;
+      this.contact.emit(this.fg.value as OrganizationContactPayload);
     }
-  }
+ }
 }