表单验证不是有角度的？ [英] Form validation is not working in angular?

问题描述

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

I want to check whether the dropdown is empty.

需要显示所需的讯息

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

If not empty, enable the submit button.

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

If empty, disable the submit button. Below is my 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);
  }

}

此处更新演示

推荐答案

您当前正在将formcontrol分配给formcontrol，而您希望为表单控件赋值​​。您可以在下面将表单控件 name 分配给formcontrol name ：

You are currently assigning formcontrols to your formcontrol, whereas you want to assign value to your form controls. Below you are assigning form control name to formcontrol name:

错误：

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

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

因此，只需声明名称，使用值执行您想要的操作，然后将该值分配给您表格控制...

so instead, just declare name, do what you want with the value, then assign that value to your form control...

正确：

name: string;

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

然后只需添加 [disabled] =！myForm.valid在你的提交按钮上。

Then just add [disabled]="!myForm.valid" on your submit button.

至于另一个问题，默认情况下Angular材料不会显示错误信息，除非触摸了该字段，所以你需要有一个自定义错误状态匹配器，即使没有触摸字段也显示错误（如果这是你想要的）：

As for the other question, by default Angular material doesn't show error message unless the field has been touched, so you need to have a custom error state matcher that shows the error even when field is not touched (if that is what you want):

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

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

在您的TS中，声明一个错误状态匹配器：

and in your TS, declare a error state matcher:

matcher = new MyErrorStateMatcher();

并在模板中使用：

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

这是你的

这篇关于表单验证不是有角度的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！