提交时的 Angular 9 Reactive Form returns 空值

Question

我快疯了。我试图用用户名和密码构建一个简单的登录表单。我使用了 Angular 中的 Reactive Forms 方法，并且在提交表单时总是返回空值。表单状态始终显示无效。看起来我得到了另一个表单实例，但不是我期望从提交中获得的表单。有人可以帮助我吗？

这是我的模块文件：

@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>

Form output

也许有人理解我做错了什么？

Answer 1

移除

(ngSubmit)="onSubmit()"

添加您的提交按钮

(click)="onSubmit()"

Working Example

Answer 2

MikeOne 如果我改成这样：

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

我得到了相同的结果。

提交时的 Angular 9 Reactive Form returns 空值

Angular9 ReactiveForm returns null value on Submit

angular

angular-reactive-forms

angular9