Angular9 ReactiveForm возвращает нулевое значение при Submit - PullRequest
Новая
       21

Angular9 ReactiveForm возвращает нулевое значение при Submit

0 голосов
/ 26 марта 2020

Я просто схожу с ума. Я попытался создать простую форму входа в систему с именем пользователя и паролем. Я использовал подход Reactive Forms из Angular, и я всегда получаю нулевые значения, возвращаемые при отправке формы. Состояние формы всегда показывает недействительным. Похоже, я получаю другой экземпляр формы, но не ту форму, которую я ожидаю от отправки. Может кто-нибудь помочь мне?

Это мой файл модуля: 

@NgModule({
 imports: [
    CommonModule,
    ContentPagesRoutingModule,
    ReactiveFormsModule
 ],
 declarations: [
    ComingSoonPageComponent,
    ErrorPageComponent,
    ForgotPasswordPageComponent,
    LockScreenPageComponent,
    LoginPageComponent,
    MaintenancePageComponent,
    RegisterPageComponent
 ],
 providers: [
  FormBuilder
 ]
})

Это мой файл компонента: 

@Component({
  selector: 'app-login-page',
  templateUrl: './login-page.component.html',
  styleUrls: ['./login-page.component.scss']
})
export class LoginPageComponent {
  loginForm: FormGroup;
  model: any = {};

  constructor(private router: Router, private route: ActivatedRoute, private formBuilder: FormBuilder) 
  {
  }

  get lf() { return this.loginForm.controls; }

  ngOnInit(): void {
    this.loginForm = this.formBuilder.group({
      username: new FormControl({value: 'jimmy', disabled: false}, [Validators.required]),
      password: new FormControl('123456', [Validators.required])
    });
  }

  // On submit button click
  onSubmit() {
    console.log(this.loginForm);
    this.loginForm.reset();
  }

  // On Forgot password link click
  onForgotPassword() {
    this.router.navigate(['forgotpassword'], { relativeTo: this.route.parent });
  }

  // On registration link click
  onRegister() {
    this.router.navigate(['register'], { relativeTo: this.route.parent });
  }
}

А это файл HTML, где форма расположена: 

<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
    <!--BEGIN FORM INPUT-->
    <input type="text" class="form-control mb-3" placeholder="Username" formControlName="username"/>
    <input type="password" class="form-control mb-3" placeholder="Password" formControlName="password"/>
    <!--END FORM INPUT-->

    <div class="d-flex justify-content-between mt-2">
        <div class="remember-me">
            <div class="custom-control custom-checkbox custom-control-inline mb-3" >
                <input type="checkbox" id="customCheckboxInline1" name="customCheckboxInline1" class="custom-control-input" />
                <label class="custom-control-label" for="customCheckboxInline1">
                Remember Me
                </label>
            </div>
        </div>

        <div class="forgot-password-option">
            <a [routerLink]="['/pages/forgotpassword']" class="text-decoration-none text-primary">Forgot Password ?</a>
        </div>
    </div>

    <div class="fg-actions d-flex justify-content-between">
        <div class="login-btn">
            <button class="btn btn-outline-primary">
                <a [routerLink]="['/pages/register']" class="text-decoration-none" >Register</a>
            </button>
        </div>

        <div class="recover-pass">
            <button [disabled]="!loginForm.valid" class="btn btn-primary" type="submit">
                <span class="text-decoration-none text-white">Login</span>
            </button>
        </div>
    </div>
</form>

Форма вывода

Может быть, есть кто-то, кто понимает, что я делаю неправильно?

Ответы [ 2 ]

0 голосов
/ 26 марта 2020

MikeOne, если я изменю это на: 

 this.loginForm = this.formBuilder.group({
    username: ['jimmy', [Validators.required]],
    password: ['123456', [Validators.required]]
  });

я получу тот же результат.

0 голосов
/ 26 марта 2020

удалить 

(ngSubmit)="onSubmit()"

Добавить на кнопку отправки 

(click)="onSubmit()"

Рабочий пример

...