Angular 7 Register Form With Reactive Form

Merhaba,

Firebase Authentication uygulamasında kullanmak üzere basit kontrollerden oluşan bir Register Form oluşturacağım.

Register Form with Reactive Form & Angular

1. Adım

Bir Angular 7 projeyi oluşturup app.module.ts dosyamızda FormsModule ve ReactiveFormsModule’ ü import ediyoruz. (Bir önceki konumuzda AngularFireModule importunu yapmıştık)

import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { FirebaseAuthService } from './services/firebase/firebase-auth.service';
import { AngularFireModule } from '@angular/fire';
import { environment } from 'src/environments/environment';
imports: [
   FormsModule,
   ReactiveFormsModule,
   AngularFireModule.initializeApp(environment.firebaseConfig)
]

— İsteğe bağlı bootstrap css ve js kütüphanelerini de projenize dahil edebilirsiniz.

2. Adım

Register sayfamızın ts dosyasını oluşturalım.

registerForm: FormGroup;
constructor(public fb: FormBuilder) {
   this.createRegisterForm();
}
ngOnInit() {}
register(rf: FormGroup) {
   this.fireAuthService.registerUser(rf.value.email, rf.value.password)
   .then(p => {
      console.log(p);
   }).catch(err => {
      console.log(err);
   });
}
createRegisterForm() {
   this.registerForm = this.fb.group({
      email: ['', [Validators.required, Validators.email]],
      password: ['', [Validators.required]],
      passwordVerify: ['', [Validators.required]]
   },
   {
      validator: this.passwordMatch // your validation method
   })
}
passwordMatch(AC: AbstractControl) {
   if (AC.get('password').value != AC.get('passwordVerify').value) {
      AC.get('passwordVerify').setErrors({ MatchPassword: true });
      return true;
   } else {
      return null;
   }
}

• FormGroup tipinde bir registerForm tanımladım.
• passwordMatch() : Kullanıcıdan alınan parola ile parola doğrulama değerlerinin uyuşup uyuşmadığını kontrol eder.
• createRegister() : İçerisinde email,password,passwordVerify barındıran inputları oluşturur. (Bu metodu constructor’ da çalıştırıyorum ki sayfa oluşturulurken form da oluşturulsun.)

3. Adım

Register sayfamızın tasarımını yapalım ve uyarılarımızı yazalım.

<form [formGroup]="registerForm" (ngSubmit)="register(registerForm)">
   <div class="form-group">
      <label for="usr">Email:</label>
      <input type="text" formControlName="email" class="form-control" />
      <span style="color: #ec4444" *ngIf="registerForm.controls?.email?.dirty">
         <span style="color: #ec4444" *ngIf="registerForm.controls?.email?.errors?.required">
            <strong>Required</strong>
         </span>
         <span *ngIf="!registerForm.controls?.email?.errors?.required && registerForm.controls?.email?.invalid">
            <strong>Email is wrong format</strong>
         </span>
      </span>
   </div>
   <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" formControlName="password" class="form-control" />
      <span style="color: #ec4444" *ngIf="registerForm.controls?.password?.errors?.required && registerForm.controls?.password?.dirty">
         <strong>Required</strong>
      </span>
   </div>
   <div class="form-group">
      <label for="pwd">Password (Confirm):</label>
      <input type="password" formControlName="passwordVerify" class="form-control" />
      <span style="color: #ec4444" *ngIf="registerForm.controls?.passwordVerify?.dirty">
         <span *ngIf="registerForm.controls?.passwordVerify?.errors?.required">
            <strong>Required</strong>
         </span>
      <span *ngIf="registerForm.controls?.passwordVerify?.errors?.MatchPassword">
            <strong>Passwords do not match</strong>
         </span>
      </span>
   </div>
   <div class="form-group">
      <button type="submit" [disabled]="registerForm.invalid" class="btn btn-primary btn-block">Register</button>
   </div>
</form>

• Her input için belirli kontrolleri .ts dosyamızdaki createForm() metodunda yazmıştık ve .html sayfamında da kontrollerin uyarılarını yazdık. Parça parça bu uyarıları inceleyip görelim.

<span style="color: #ec4444" *ngIf="registerForm.controls?.email?.dirty">
   <span style="color: #ec4444" *ngIf="registerForm.controls?.email?.errors?.required">
      <strong>Required</strong>
   </span>
   <span *ngIf="!registerForm.controls?.email?.errors?.required && registerForm.controls?.email?.invalid">
      <strong>Email is wrong format</strong>
   </span>
</span>

• Önce email isimli form elemanına kullanıcı tıklamış mı onun kontrolünü yaptık. (Eğer kullanıcı henüz bir işlem yapmadıysa boşuna uyarı vermeye gerek yok).
• Ardından Email adresi boş mu ve doğru bir formatta mı yazılmış onun kontrolünü yaptık.

<span style="color: #ec4444" *ngIf="registerForm.controls?.password?.errors?.required && registerForm.controls?.password?.dirty">
   <strong>Required</strong>
</span>

• password isimli form elemanında yalnızca zorunluluk kontrolü yapıyor. (Eşleşme kontrolü yapmaya gerek yok ki zaten eşleşmeyecek çünkü henüz doğrulama parola alanı boş)

<span style="color: #ec4444" *ngIf="registerForm.controls?.password?.errors?.required && registerForm.controls?.password?.dirty">
   <strong>Required</strong>
</span>

• passwordVerify isimli form elemanında zorunluluk ve eşleşme kontrollerimizi yapıyoruz.

<span style="color: #ec4444" *ngIf="registerForm.controls?.passwordVerify?.dirty">
   <span *ngIf="registerForm.controls?.passwordVerify?.errors?.required">
      <strong>Required</strong>
   </span>
   <span *ngIf="registerForm.controls?.passwordVerify?.errors?.MatchPassword">
      <strong>Passwords do not match</strong>
   </span>
</span>

• Yine öncelikle kullanıcı parola doğrulama alanına dokunmuş mu onun kontrolünü yaptık.
• Sonrasında da sırayla zorunlu alana giriş yapılmış mı ve parolalar eşleşiyor mu onun kontrolünü yaptık.

Son olarak butonumuzun aktif ya da pasif olması için genel bir kontrol yapıyoruz.

<button type="submit" [disabled]="registerForm.invalid" class="btn btn-primary btn-block">Register</button>

• ReactiveForm’ u oluştururken verdiğimiz Validators değerleri formumuzun geçerli ya da geçersiz olmasını sağlayacak. Eğer registerForm.invalid değeri true ise formumuzda hala geçersiz olan inputlar var demektir ve düzeltilmesi gerekmektedir. registerForm.invalid değerinin false olduğu durumda da butonumuz aktif olacak ve submit işlemini yapabileceğiz.