角反应形式-验证不起作用

Question

正在创建登录表单。使用反应式表单验证器时，该表单始终无效。代码如下

import { Component, OnInit } from '@angular/core';
import { FormGroup,FormControl,Validators } from '@angular/forms';


@Component({
  selector: 'app-loginform',
  templateUrl: './loginform.component.html',
  styleUrls: ['./loginform.component.css']
})
export class LoginformComponent implements OnInit {

  registrationForm = new FormGroup({
    accountName : new FormControl('', [Validators.required]),
})

formSubmit(){
    console.log(this.registrationForm.value)
  }

TS文件如下

{{1}}

提交按钮始终处于禁用状态。我无法提交。

Answer 1

您可以通过检查表单的有效性来启用/禁用按钮：

<button type="submit" [disabled]="!disableBtn">Click</button>

在组件内部：

let disableBtn = false;

this. registrationForm.valueChanges 
            .subscribe((changedObj: any) => {
                 this.disableBtn = this. registrationForm.valid;
            });