初始化表单时未禁用Angular7按钮答案

【问题标题】：Angular7 button not disabled when the form is initialized初始化表单时未禁用Angular7按钮
【发布时间】：2019-08-16 03:01:48
【问题描述】：

我正在尝试在未填写表单时禁用按钮。在 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 中进行微小的更改（例如更改标签），它就可以完美运行。

【问题讨论】：

disabled 不需要是真还是假？你试过用false替换null吗？
您是否允许您的应用与 ie 一起使用？（基于角度教程）
@WillAlexander，我已经尝试过了，但没有成功。
@AliMaleki，怎么做？

标签： angular internet-explorer-11

【解决方案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 确保它是布尔值。

【讨论】：

【解决方案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>

【讨论】：

@dellasavia 在这里