[英]Disable submit form when form invalid Angular + Material
我使用帶有sat-popover庫的 Angular 5.1.1 /Typescript 2.4.2 + Material 5 構建表單
嘗試在輸入無效時禁用提交按鈕而沒有成功。 我正在使用材料輸入驗證示例
驗證有效,我收到一條錯誤消息,但按鈕未禁用,表單提交時為空值。 當輸入無效時,我無法弄清楚如何使用正確的條件來禁用按鈕。 試過了
ng-disabled="!flagForm.valid"
和
ng-disabled="flagForm.$invalid"
使用時
[disabled]="!flagForm.valid"
我得到“類型錯誤:無法讀取未定義的屬性“有效””
它們似乎都不起作用。 我錯過了什么? 這是完整的代碼。
import { Component, Input, Optional, Host } from '@angular/core';
import { FormControl, FormGroupDirective, NgForm, Validators} from '@angular/forms';
import { SatPopover } from '@ncstate/sat-popover';
import { filter } from 'rxjs/operators/filter';
import { ErrorStateMatcher} from '@angular/material/core';
/** Error when invalid control is dirty, touched, or submitted. */
export class MyErrorStateMatcher implements ErrorStateMatcher {
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
const isSubmitted = form && form.submitted;
return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
}
}
@Component({
selector: 'inline-edit',
styleUrls: ['inline-edit.component.scss'],
template: `
<form (ngSubmit)="onSubmit()" name="flagForm" novalidate>
<div class="mat-subheading-2">Submit Your flag</div>
<mat-form-field>
<input matInput maxLength="140" name="flag" [(ngModel)]="flag" [formControl]="flagFormControl"
[errorStateMatcher]="matcher">
<mat-hint align="end">{{flag?.length || 0}}/140</mat-hint>
<mat-error *ngIf="flagFormControl.hasError('required')">
Flag is <strong>required</strong>
</mat-error>
</mat-form-field>
<div class="actions">
<button mat-button type="button" color="primary" (click)="onCancel()" class="btn btn-secondary m-btn m-btn--air m-btn--custom">CANCEL</button>
<button mat-button type="submit" ng-disabled="!flagForm.valid" color="primary" class="btn btn-accent m-btn m-btn--air m-btn--custom">Submit</button>
</div>
</form>
`
})
export class InlineEditComponent {
flagFormControl = new FormControl('', [
Validators.required
]);
matcher = new MyErrorStateMatcher();
/** Overrides the flag and provides a reset value when changes are cancelled. */
@Input()
get value(): string { return this._value; }
set value(x: string) {
this.flag = this._value = x;
}
private _value = '';
/** Form model for the input. */
flag = '';
constructor(@Optional() @Host() public popover: SatPopover) { }
ngOnInit() {
// subscribe to cancellations and reset form value
if (this.popover) {
this.popover.closed.pipe(filter(val => val == null))
.subscribe(() => this.flag = this.value || '');
}
}
onSubmit() {
if (this.popover) {
this.popover.close(this.flag);
}
}
onCancel() {
if (this.popover) {
this.popover.close();
}
}
}
請更正角度禁用的語法
<button mat-button type="submit" [disabled]="!flagForm.valid" color="primary" class="btn btn-accent m-btn m-btn--air m-btn--custom">Submit</button>
有必要在類中實例化一個表單,像這樣
flagForm: FormGroup;
除了像@tihoroot 提到的那樣在類中聲明 FormGroup 之外,您可能希望在類定義中獲取 formControl 的一個實例,如下所示:
get flagFormControl() { return this.flagForm.get('flagFormControl'); }
否則 Angular 無法找到所需字段的實例。
對於最新的角度,您可以使用下面的簡單代碼在類型腳本中驗證您的表單
假設您的表單如下所示
<form [formGroup]="userForm" novalidate (ngSubmit)="onSubmit()">
你可以驗證它的狀態,比如
if (!this.userForm.valid) {
return;
}
您的表單未定義,以解決此問題:
在您的組件中:
flagFormControl: FormGroup = new FormGroup({});
ngOnInit(): void {
// for example
this.flagFormControl= this.formBuilder.group({
'username': new FormControl('', [Validators.required, Validators.minLength(3)]),
'email': new FormControl('', [Validators.required, Validators.email]),
'password': new FormControl('', [Validators.required, Validators.minLength(6)])
});
}
或組件中的第二個選項:
flagFormControl: FormGroup = new FormGroup({
username: new FormControl('', [Validators.required, Validators.minLength(3)])
... etc
});
並在您的 Form-html 代碼中:
<form *ngIf="flagFormControl" [formGroup]="flagFormControl" (submit)="createSomething()">
...
<button mat-raised-button color="primary [disabled]="!flagFormControl.valid">Create Something</button>
</form>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.