title: Angular - Form validation without form tag
body: <p>I'm trying to finalise a register form. I've to do it without using the form tag.</p>
  
  <p>I've this registerform:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="center col-xs-8 col-xs-offset-2"&gt;
  
          &lt;p class="h5 text-center mb-4"&gt;{{ 'Signup' | translate }}&lt;/p&gt;
  
          &lt;div class="form-group"&gt;
              &lt;label for="email"&gt;{{ 'SignupEmail' | translate }}&lt;/label&gt;
                  &lt;input type="text" [(ngModel)]="user.email" class="form-control" [ngClass]="{ 'is-invalid': submitted &amp;&amp; f.email.errors }" /&gt;
                  &lt;div *ngIf="submitted &amp;&amp; f.email.errors" class="invalid-feedback"&gt;
                      &lt;div *ngIf="f.email.errors.required"&gt;Email is required&lt;/div&gt;
                      &lt;div *ngIf="f.email.errors.email"&gt;Email must be a valid email address&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                  &lt;label for="username"&gt;{{ 'SignupUsername' | translate }}&lt;/label&gt;
                  &lt;input type="text"  [(ngModel)]="user.name" class="form-control" [ngClass]="{ 'is-invalid': submitted &amp;&amp; f.email.errors }" /&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                  &lt;label for="password"&gt;{{ 'SignupPassword' | translate }}&lt;/label&gt;
                  &lt;input type="password"  [(ngModel)]="user.password" class="form-control" [ngClass]="{ 'is-invalid': submitted &amp;&amp; f.email.errors }" /&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                  &lt;label for="birth"&gt;{{ 'SignupBirth' | translate }}&lt;/label&gt;
                  &lt;input type="date"  [(ngModel)]="user.dateNaissance" class="form-control" [ngClass]="{ 'is-invalid': submitted &amp;&amp; f.email.errors }" /&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                  &lt;button [disabled]="loading" class="btn btn-info" (click)="onSubmit()" &gt;{{ 'SignupSubmit' | translate }}&lt;/button&gt;
                  &lt;img *ngIf="loading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" /&gt;
                  &lt;div class="text-center"&gt;
                    {{ 'SignupAccount1' | translate }} &lt;a routerLink="/login"&gt;{{ 'SignupAccount2' | translate }}&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>The problem, is that the mail and the other input are always required even if i put a correct address mail in the input. And i don't get why...</p>
  
  <p>Here is the <strong>register.component.ts</strong></p>
  
  <pre><code>import {Component, OnInit} from '@angular/core';
  import {FormGroup, FormBuilder, Validators} from '@angular/forms';
  import {first} from 'rxjs/operators';
  import {Router} from '@angular/router';
  import {AlertService} from '../services/alert.service';
  import {UserService} from '../services/user.service';
  
  @Component({
    selector: 'app-register',
    templateUrl: './register.component.html',
    styleUrls: ['./register.component.sass']
  })
  export class RegisterComponent implements OnInit {
  
    registerForm: FormGroup;
    loading = false;
    submitted = false;
    user: any;
  
  
    constructor(private fb: FormBuilder, private router: Router, private userService: UserService, private alertService: AlertService) {
  
    }
  
    ngOnInit() {
      this.registerForm = this.fb.group({
        username: ['', Validators.required],
        //gender: ['', Validators.required],
        birth: ['', Validators.required],
        email: ['', [Validators.required, Validators.email]],
        password: ['', [Validators.required, Validators.minLength(8)]]
      });
  
      this.user = new Object();
  
    }
  
    click(ev) {
      console.log(ev.target.defaultValue);
    }
  
    // convenience getter for easy access to form fields
    get f() {return this.registerForm.controls;}
  
    onSubmit() {
      this.submitted = true;
  
      // stop here if form is invalid
      if (this.registerForm.invalid) {
        window.alert("Informations invalides");
        return;
      }
  
      this.loading = true;
      this.userService.register(this.registerForm.value)
        .pipe(first())
        .subscribe(
        data =&gt; {
          this.alertService.success('Registration successful', true);
          this.router.navigate(['/login']);
        },
        error =&gt; {
          this.alertService.error(error);
          this.loading = false;
        });
    }
  
  }
  </code></pre>
  
  <p>Can you help me validate this form (but without adding the form tag)...</p>
  
  <p>Thank you !</p>