Javascript 按钮不会在角度变化时禁用

我有一个按钮，每当表单无效时，它都会被禁用

<button [disabled]="createForm.invalid" type="submit" class="btn btn-primary pull-right button-spinner" tabindex="0" ><span>NEXT</span></button>

表单的初始化：

this.createForm = this.formBuilder.group({
            formText: ['', Validators.required],
            list: ['', Validators.required]
)};

---

我会像以前一样用一个例子来解决你的问题。按照这个你可以做

test.html

<form [formGroup]="changePasswordForm" (ngSubmit)="changePassword()">
          <ion-item color="border-text">
            <ion-input type="password" placeholder="Existing Password"
                       formControlName="existing_pass"></ion-input>
          </ion-item>
          <ion-item no-lines *ngIf="existingPass.invalid && existingPass.touched">
            <ion-label style="color:#F53D3D" no-margin stacked>Existing Password Required</ion-label>
          </ion-item>
         <div class="buttonClass">
         <button [disabled]="!isReadyToSave" ion-button round color="primary" block
                style="margin-top: 20px !important;">Save
         </button>
      </div>
    </form>

禁用按钮
启用按钮
我被点击了{{count}}次。
请按照以下链接获取详细信息：
https://blogs.msdn.microsoft.com/laurieatkinson/2016/09/12/using-data-binding-with-angular-2-to-disable-a-button/

您可以通过使用属性

[disabled]

检查您的

表单组

是否有效来实现这一点，请查看下面的详细说明

TS:

// method which will create the FormGroup
private createMyForm() {
        this.myForm = new FormGroup({
            FormFiled1 : new FormControl('', [Validators.required, Validators.maxLength(200)]),
            FormFiled2 : new FormControl('', []),
            FormFiled3 : new FormControl('', [Validators.required])
        });
    }

// set [disabled] value as true or false to disable or enable the button 
<button type="submit" [disabled]="myForm.invalid" (click)="MyFunction()">Submit</button>

[Validators.required]

这将使表单字段成为必填字段，一旦您不在字段中输入任何内容，表单将无效 因此，您必须使用下面的代码检查表单是否有效

HTML:

// method which will create the FormGroup
private createMyForm() {
        this.myForm = new FormGroup({
            FormFiled1 : new FormControl('', [Validators.required, Validators.maxLength(200)]),
            FormFiled2 : new FormControl('', []),
            FormFiled3 : new FormControl('', [Validators.required])
        });
    }

// set [disabled] value as true or false to disable or enable the button 
<button type="submit" [disabled]="myForm.invalid" (click)="MyFunction()">Submit</button>

//将[disabled]值设置为true或false以禁用或启用按钮
提交

---

您可以使用两种操作

<button [disabled]='createForm.invalid || isNextDisabled'>Submit</button>

---

工作

实际上，您可能不需要单独查找

值更改

。这是一个密码

HTML

---

请在整个页面中向验证器显示控制台中从加载到更改任何输入字段的任何错误？请让我知道我猜这与我当前的实现是相同的。区别在于价值的变化和形式的创造。你的在构造函数中，我的在

ngOnInit

中，这有关系吗？没有，但是试着把它放在构造函数中检查一下。你用的是哪个角度的？是的。你是对的。但似乎只有在我在输入文本或文本区域外单击后，表单才会生效，即使我没有在blur上添加

update

或其他东西这正是我想要的！但我真的不知道为什么在我的应用程序上，它只会在我点击文本区域/输入文本之外时进行验证：(

<button [disabled]='createForm.invalid || isNextDisabled'>Submit</button>

this.createForm.valueChanges.subscribe((v) => {
      this.isNextDisabled = !this.createForm.valid;
 });

<form [formGroup]="createForm">
    <input formControlName='formText'>
    <input formControlName='list'>

    <button [disabled]="createForm.invalid"
 type="submit"
  class="btn btn-primary pull-right button-spinner"
   tabindex="0" >
   <span>NEXT</span>
   </button>
</form>

import { Component, OnInit } from "@angular/core";
import {
  FormsModule,
  ReactiveFormsModule,
   FormGroup, FormBuilder, Validators
} from "@angular/forms";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  name = "Angular";
  createForm: FormGroup;
  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.createForm = this.formBuilder.group({
      formText: ["", Validators.required],
      list: ["", Validators.required]
    });
  }
}