表单验证不是有角度的?

时间:2018-03-28 12:12:47

标签: javascript angular angular-material2

我想检查下拉列表是否为空。

需要显示所需的消息和

如果不为空,请启用提交按钮。

如果为空,请禁用提交按钮。以下是我的HTML

以下是我的HTML

<form  [formGroup]="myForm"  (ngSubmit)="save()" >
<mat-form-field>
  <mat-select formControlName="name" placeholder="Element List"  (selectionChange)="elementSelectionChange($event)" required>
    <mat-option *ngFor="let element of Elements" [value]="element.name">
      {{ element.name }}
    </mat-option>
  </mat-select>
  <mat-error *ngIf="myForm.hasError('required', 'name')">Please choose an name</mat-error>
</mat-form-field>
<mat-form-field>
  <mat-select  formControlName="symbol"  placeholder="Symbol List" required>
    <mat-option *ngFor="let element of selectedElementSymbol" [value]="element.symbol">
      {{ element.symbol }}
    </mat-option>
  </mat-select>
  <mat-error *ngIf="myForm.hasError('required', 'symbol')">Please choose an symbol</mat-error>
</mat-form-field>

<div mat-dialog-actions>

  <button mat-button (click)="onNoClick()">Cancel</button>
<button type="submit"  mat-button cdkFocusInitial>Add</button>
</div>
</form>

下面是我的组件

export class DialogOverviewExampleDialog {

  myForm: FormGroup;
  symbol = new FormControl('', Validators.required);
  name = new FormControl('', Validators.required);
  constructor(
    public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
    @Inject(MAT_DIALOG_DATA) public data: any,
    private formBuilder: FormBuilder) {

    this.myForm = this.formBuilder.group({
      name: [this.name],
      symbol: [this.symbol],
    });
  }

  save() {

    console.log(this.myForm.value);
  }

}

updated demo here

3 个答案:

答案 0 :(得分:1)

您当前正在将formcontrol分配给formcontrol,而您希望为表单控件指定值。您可以在下方将表单控件name分配给formcontrol name

<强> WRONG:

name = new FormControl('', Validators.required);

this.myForm = this.formBuilder.group({
  'name': [this.name, Validators.required],
  // ...
});

所以相反,只需声明名称,用值做你想要的,然后将该值赋给表单控件...

<强>正确:

name: string;

this.myForm = this.formBuilder.group({
  'name': [this.name, Validators.required],
  // ...
});

然后只需在提交按钮上添加[disabled]="!myForm.valid"

至于另一个问题,默认情况下Angular材质不会显示错误消息,除非触摸了该字段,因此您需要有一个自定义错误状态匹配器,即使未触及该字段也会显示错误(如果是你想要什么):

import {ErrorStateMatcher} from '@angular/material/core';

export class MyErrorStateMatcher implements ErrorStateMatcher {
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    return !!(control.invalid);
  }
}

并在您的TS中声明错误状态匹配器:

matcher = new MyErrorStateMatcher();

并在模板中使用:

<mat-select formControlName="name" ... [errorStateMatcher]="matcher">

这是你的

StackBlitz

答案 1 :(得分:0)

您必须将验证程序插入到表单构建器对象中。

快速浏览一下:

https://angular.io/guide/reactive-forms#validatorsrequired

this.heroForm = this.fb.group({
  name: ['', [Validators.required] ],
});

按钮:

<button type="submit" [disabled]="!form.valid"  mat-button cdkFocusInitial>Add</button>

答案 2 :(得分:0)

禁用提交按钮(link

<button type="submit" [disabled]="!myForm.valid" mat-button cdkFocusInitial>Add</button>

为了检查下拉列表是否为空,您需要创建所需的表单字段,如

this.myForm = this.formBuilder.group({
  'name': [this.name, Validators.required],
  'symbol': [this.symbol, [Validators.required]]
});

为了显示错误突出显示,您需要在模板中添加一个ngClass,如。

[ngClass]="{'error': myForm.controls.name.valid == false}"