如何在 angular 2 中启用使用反应形式的按钮？

Question

我有一个输入字段和一个 button.When 该字段不为空按钮应该是 enabled.But 在我的例子中我已经在传递输入 value.so 它应该被启用但是这不是 happening.It 当我在输入中输入任何内容时启用 field.Any 关于如何实现的信息 it.below 是我的代码

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);
  }
}

这是我的 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>

Answer 1

从您的输入中删除 [value]="hello"，因为它们应该在 new FormControl(value, [validators], [asyncValidators]) 中用于反应形式。

类似于：

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

Answer 2

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

第一步：导入 ReactiveForm、FormBuilder、Validators
第 2 步：声明 FormGroup 对象并将表单生成器注入构造函数
第 3 步：初始化您的表单组
第 4 步：以与您相同的方式使用反应形式，但有一些变化

代码：

export class SignupFormComponent implements OnInit {
  userForm: FormGroup;
  firstName: string;

  constructor(private _formBuilder:FormBuilder){}

  ngOnInit() {
    this.userForm = this._formBuilder.group({
      'firstName': ['',[Validators.required,Validators.minLength(5)]]
    });
  }

  onSubmit() {
    console.log(this.firstName);
  }
}

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>

如何在 angular 2 中启用使用反应形式的按钮？

How to enable button using reactive forms in angular 2?

angular

typescript

primeng