My form always gets invalid. Pleas see my code below:

**HTML**

```
<form [formGroup]="form">
          <div class="row">
            <div class="col-md-12">
              <div class="form-group">
                <label>Username</label>
                <input
                  type="text"
                  class="form-control"
                  [formControl]="useNameControl"
                  placeholder="Enter your username"
                  required
                />
              </div>
            </div>
            <div class="col-md-12">
              <div class="form-group">
                <label>Password</label>
                <input
                  type="password"
                  class="form-control"
                  [formControl]="passwordControl"
                  placeholder="Enter your password"
                  required
                />
              </div>
            </div>
          </div>
        </form>
<div class="card-footer">
        <hr />
        <div class="button-container">
          <div class="row">
            <div class="col-md-12">
              <div class="update ml-auto mr-auto">
                <button
                  type="button"
                  class="btn btn-primary
                  btn-round"
                  (click)="submit()">
                  Start Accoutning System
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>

```

**TS**

```
ngOnInit(): void {
    this.returnUrl = this.route.snapshot.queryParamMap.get('returnUrl');
    this.createForm();
  }

  createForm() {
    this.useNameControl = new FormControl('', {
      validators: [Validators.required],
      updateOn: 'blur'
    });
    this.passwordControl = new FormControl('', {
      validators: [Validators.required],
      updateOn: 'blur'
    });

    this.form = new FormGroup({
      userName: this.useNameControl,
      password: this.passwordControl,
    })
  }

  submit(): void {
    debugger;
    if (this.form.invalid) {
      this.cs.showNotification('top', 'right', 'Username and Password are required', 'Login Error', 4)
      return;
    }
    const model: LoginModel = {
      userName: this.form.get('userName').value,
      password: this.form.get('password').value
    }
    this.ss.login(model).subscribe((resp: AppUserAuth) => {
      this.securityObject = resp;
      if (this.returnUrl) {
        this.router.navigateByUrl(this.returnUrl);
      } else {
        this.router.navigate(['/dashboard']);
      }
    }, () => {
      this.securityObject = new AppUserAuth();
    });
  }

```

I don't get any errors. If I put my button inside the form and change the type to submit, as soon as I click, it refreshes the whole page.