角度按钮始终在窗体上启用

Question

我有一个非常基本的表单，如果表单未填写，我正在尝试启用/禁用按钮。使用此表单时，即使我在输入字段中添加/删除数据，该按钮也始终处于启用状态。

<form #activationForm="ngForm">
<input type="email" ([ngModel])="email" placeholder="{{'activation.email' | translate}}" required>
<input type="text" ([ngModel])="code" placeholder="{{'activation.code' | translate}}" required>
<button [disabled]="activationForm.form.invalid" class="button button--success" translate="activation.activate" (click)="activate()"></button>
</form>

@Component({
selector: 'app-activation',
templateUrl: './activation.component.html',
styleUrls: ['./activation.component.scss']
})
export class ActivationComponent {
public email: string = '';
public code: string = '';
}

为什么该按钮始终处于启用状态？

Answer 1

我建议使用反应式表单。有一种更干净的方式来做你想做的事。

下面是一个示例：

应用模块：

import { ReactiveFormsModule } from '@angular/forms';
imports: [
...
ReactiveFormsModule
]

组件打字脚本：

this.activationForm = new FormGroup({
email: new FormControl('', [Validators.required, Validators.email]),
code: new FormControl('', [Validators.required])
});

组件模板：

<form [formGroup]="activationForm" (ngSubmit)="onSubmit($event)">
<input formControlName="email" />
<input formControlName="code" />
<button [disabled]="activationForm.invalid">Submit</button>
</form>

如果您使用的是 Angular Material，则可以利用mat-hint或mat-error来帮助处理验证消息/提示。当然，您也可以自己制作。

反应式表单的好处是一切都是可以访问的。例如，您可以通过使用this.activationForm.get('email')访问表单FormControl来对表单执行"动态操作"。表单本身也是如此(例如：this.activationForm.setValue(...)(。它非常强大，在我看来，比NgForm更可取。

Answer 2

像这样使用 ngModel 设置双向数据绑定[(ngModel)]="email"您还必须提供 name 属性

<form #activationForm="ngForm">
<input type="email" name="email" [(ngModel)]="email" placeholder="{{'activation.email' }}" required>
<input type="text" name="code" [(ngModel)]="code" placeholder="{{'activation.code' }}" required>
<button [disabled]="activationForm.form.invalid" class="button button--success" translate="activation.form.invalid" (click)="activate()">create</button>
</form>

演示 🚀