如何在angular 2中使用被动形式启用按钮？

我有一个输入字段和一个按钮。当该字段不为空时，按钮应该被启用。但在我的例子中，我已经在传递输入值。因此它应该被启用，但这不会发生。当我在输入字段中键入任何内容时，它被启用。关于如何实现它的任何信息。下面是我的代码

export class SignupFormComponent implements OnInit {
  userForm: FormGroup;
  submitted: boolean;
  hello = "hello world";

  ngOnInit() {
    this.userForm = new FormGroup({
      firstName: new FormControl('',[<any>Validators.required, <any>Validators.minLength(5)])
    });
  }

  onSubmit({ value, valid }: { value: userForm, valid: boolean }) {
    this.submitted = true;
    console.log(value,valid);
  }
}

导出类SignupFormComponent实现OnInit{
userForm:FormGroup；
提交：布尔值；
hello=“hello world”；
恩戈尼尼特（）{
this.userForm=new FormGroup({
firstName:newformcontrol（“”，[Validators.required，Validators.minLength（5）]）
});
}
onSubmit（{value，valid}:{value:userForm，valid:boolean}）{
this.submitted=true；
console.log（值，有效）；
}
}

这是我的html代码

<form [formGroup]="userForm" (ngSubmit)="onSubmit(userForm)" validate>
  <div class="form-group">
    <label>First Name</label>
    <input type="text" class="form-control" formControlName="firstName" [value]="hello">
  </div>
  <button type="submit"  class="btn btn-primary" [disabled]="userForm.invalid">Submit </button>
</form>

名字
提交

从您的输入中删除[value]=“hello”，因为它们应该进入反应式表单的

新表单控件（value、[validators]、[asyncValidators]）

比如：

ngOnInit() {
  this.userForm = new FormGroup({
    firstName: new FormControl(this.hello, [<any>Validators.required, <any>Validators.minLength(5)])
  });
}

ngOnInit（）{
this.userForm=new FormGroup({
firstName:newformcontrol（this.hello，[Validators.required，Validators.minLength（5）]）
});
}

简单的方法是使用反应式表单，如下所示：

• 步骤1：导入反应表单、表单生成器、验证程序
• 步骤2：声明FormGroup对象并将FormBuilder注入构造函数
• 步骤3：初始化表单组
• 第四步：用和你一样的方式使用反应式表单，但是做了一些改变

代码：

HTML:

 <form [formGroup]="userForm" (ngSubmit)="onSubmit()" name="userForm">
      <div class="form-group">
        <label>First Name</label>
        <input type="text" [(ngModel)]="firstName" class="form-control" formControlName="firstName">
        <p *ngIf="userForm.controls.firstName.invalid && (userForm.controls.firstName.dirty || userForm.controls.firstName.touched)"> Error message </p>
      </div>
      <button type="submit"  class="btn btn-primary" [disabled]="userForm.invalid">Submit </button>
    </form>

名字
错误消息

提交

验证属性在表单元素上的作用是什么？如果我理解正确，您希望在填写表单输入时启用该按钮。因此，您正在查找表单的“脏”属性，正确吗？是的..正如你所看到的，我从组件中获取输入值。因此它已经填充，按钮应该被启用。是的，我尝试过这种方法，它是有效的。但是，用我给它的方式不可能实现吗？混合这种方法的问题是，输入呈现值，但是没有调用任何reactiveForms函数将其传播到您正在创建并在[disabled]语句中使用的formGroup。如果有效，请将其标记为已接受。

 <form [formGroup]="userForm" (ngSubmit)="onSubmit()" name="userForm">
      <div class="form-group">
        <label>First Name</label>
        <input type="text" [(ngModel)]="firstName" class="form-control" formControlName="firstName">
        <p *ngIf="userForm.controls.firstName.invalid && (userForm.controls.firstName.dirty || userForm.controls.firstName.touched)"> Error message </p>
      </div>
      <button type="submit"  class="btn btn-primary" [disabled]="userForm.invalid">Submit </button>
    </form>