javascript - 在对话框 Angular 中验证表单
问题描述
我使用 Angular 的材料对话框,我需要在其中输入标题并选择批准或拒绝变体。
这里是组件的代码
import {Component, Inject, OnInit} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material";
import {FormBuilder, Validators, FormGroup} from "@angular/forms";
import { Payment } from '../payments/payment';
@Component({
selector: 'editing-dialog',
templateUrl: './editing-dialog.component.html',
styleUrls: ['./editing-dialog.component.scss']
})
export class EditingDialogComponent implements OnInit {
form: FormGroup;
reason:String;
id: Number;
statusdescription: String;
constructor(
fb: FormBuilder,
private dialogRef: MatDialogRef<EditingDialogComponent>,
@Inject(MAT_DIALOG_DATA) data:Payment) {
this.reason = data.Reason;
this.id = data.Id;
this.statusdescription = data.StatusDescription;
this.form = fb.group({
reason: [this.reason, Validators.maxLength(5)],
id: this.id,
status: status
});
}
ngOnInit() {
}
save() {
this.dialogRef.close(this.form.value);
}
close() {
this.dialogRef.close();
}
}
这是这个组件的 html
<h2>{{description}}</h2>
<mat-dialog-content [formGroup]="form">
<mat-form-field>
<input matInput required placeholder="Payment Reason" formControlName="reason" value="{{reason}}">
</mat-form-field>
<mat-radio-group formControlName="status">
<mat-radio-button value="Approved">Approved</mat-radio-button>
<mat-radio-button value="Rejected">Rejected</mat-radio-button>
</mat-radio-group>
</mat-dialog-content>
<mat-dialog-actions>
<button class="mat-raised-button" (click)="save()">
Ok
</button>
<button class="mat-raised-button"
(click)="close()">
Close
</button>
</mat-dialog-actions>
如果输入已填充,并且单击按钮时选择了单选按钮之一,我需要进行验证ok
。现在我需要验证输入。
我怎样才能正确地做到这一点?
感谢帮助。
解决方案
当您创建表单组时,将必需的规则添加到您想要的字段中,例如这里需要原因和状态字段:
this.form = fb.group({
reason: [this.reason, [Validators.required, Validators.maxLength(5)]],
id: this.id,
status: [status, [Validators.required]]
});
然后在保存方法中:
save() {
const {value, valid} = this.form;
if(valid){
this.dialogRef.close(value);
}
}
您可能需要添加 mat-error 元素以在您的 html 中显示验证错误
推荐阅读
- python-3.x - 无法使用 Yocto Dunfell 在 core-image-minimal 中包含 python3-dev
- azure - 创建 Azure 事件网格 webhook 订阅失败 TLS 握手
- php - Voyager Page Blocks 无法删除图像
- vue.js - 如何在 Nuxt 中使用 404 页面组件到当前 url
- c# - 在 C# 的 try 块中定义变量
- javascript - 如何自动重启 CSS 动画
- reactjs - Material-UI CardContent 不渲染跳转线
- c# - 如何在不调用 AsEnumerable() 的情况下获取逗号分隔列表
- node.js - Git bash 不执行 npm install
- python - 在我的这行代码中可以进行列表理解吗