表单验证不是有角度的

表单验证不是有角度的

本文介绍了表单验证不是有角度的?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

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">

这是你的

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

09-02 02:52