Question

我试图在未填写表格时禁用按钮。在Chrome和FF中，一切正常，但在IE11中，该按钮仍然启用。那是代码：

<div class="col-12">
     <app-button label="login.login" (click)="save()" [disabled]="(!f.dirty || f.invalid) ? 'disable' : null"></app-button>
     <div class="pt-3 text-right">
      <a [routerLink]="['/login']" class="pt-5">{{"login.changepassword" | translate}}</a>
    </div>
</div>

奇怪的是，如果我对通过浏览器检查器（F12）生成的html进行最小的更改（例如，更改标签），则效果很好。

Answer 1

在脚本上初始化表格。这样。

 loginForm: FormGroup;    
 constructor(private formBuilder: FormBuilder)
 ngOnInit() {
    this.loginForm= this.formBuilder.group({
    uname: ["",{validators.required}],
}

，然后将其绑定到html中。

<form [formGroup]="loginForm" >
<input type="text" name="uname" formControlName="uname"/>
<app-button (click)="save()" [disabled]="loginForm.invalid"></app-button>
</form>

或者您可以使用ngModel来确保它是布尔值。

Answer 2

尝试通过添加@Input装饰器来检测方法，以检测何时必须禁用按钮。

组件app-buton.component.ts

selector:['app-button'],
templeateUrl: ['./app-buton.component.html']
....
Class ButtonComponent {
  @Input isDisabled: booelan
}

组件app-buton.component.html

<button  [disabled]="isDisabled">

然后，在实现应用程序按钮组件的位置，您需要执行以下代码：

<app-button [isDisabled]="(!f.dirty || !f.valid)"> </app-button>

初始化表单后，未禁用Angular7按钮

2 个答案: