个人中心
文章发布
退出
作者热门文章
- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
26
4
<分区>
我在下面的代码中只提交了一些详细信息并在成功提交后重置了表单。
ngOnInit() {
this.initContactForm();
}
initContactForm(){
this.contactForm = this.formBuilder.group({
fullname: ['', Validators.compose([Validators.required, Validators.minLength(2), Validators.maxLength(30)])],
email: ['', Validators.compose([Validators.required])],
phone: ['', Validators.compose([Validators.required, Validators.minLength(10), Validators.maxLength(12)])],
subject: ['', Validators.compose([Validators.required, Validators.maxLength(25), Validators.minLength(5)])],
message: ['', Validators.compose([Validators.required, Validators.minLength(10), Validators.maxLength(200)])]
});
}
onSubmit(model){
if (this.contactForm.valid){
this.contactModel = model;
this.dataService.sendContactMessage(this.contactModel).then((resp) => {
if (resp){
this.openSnackBar('Message has been sent', 'Done');
this.contactForm.reset();
this.contactForm.updateValueAndValidity();
this.contactForm.setErrors(null);
}else{
console.log('Error');
}
});
}else{
alert('Invalid form');
}
}
查看
<form autocomplete="off" [formGroup]="contactForm" novalidate (ngSubmit)="onSubmit(contactForm.value)">
<div class="row">
<div class="col m4 s12">
<mat-form-field>
<input oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" maxlength="30" matInput type="text" placeholder="Full Name" value="" name="fullname" formControlName="fullname" required>
<mat-error *ngIf="contactForm.controls['fullname'].hasError('required')">
<strong>Please enter your Fullname</strong>
</mat-error>
</mat-form-field>
</div>
<div class="col m4 s12">
<mat-form-field>
<input matInput type="email" placeholder="Email Address" value="" name="email" formControlName="email" required email>
<mat-error *ngIf="contactForm.controls['email'].hasError('required')">
<strong>Please enter your Email Id</strong>
</mat-error>
</mat-form-field>
</div>
<div class="col m4 s12">
<mat-form-field>
<input matInput type="tel" placeholder="Contact Number" value="" name="contact" formControlName="phone" required tel>
<mat-error *ngIf="contactForm.controls['phone'].hasError('required')">
<strong>Please enter your Contact number</strong>
</mat-error>
</mat-form-field>
</div>
</div>
<div class="clearfix"></div>
<div class="row">
<div class="col m12 s12">
<mat-form-field>
<input matInput type="text" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" maxlength="25" placeholder="Subject" value="" name="subject" formControlName="subject" required>
<mat-error *ngIf="contactForm.controls['subject'].hasError('required')">
<strong>Please enter Subject</strong>
</mat-error>
</mat-form-field>
</div>
<div class="col s6 s12">
<mat-form-field>
<textarea matInput type="text" style="resize:none;" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" maxlength="200" placeholder="Message" value="" name="message" formControlName="message"
rows="5" required></textarea>
<mat-error *ngIf="contactForm.controls['message'].hasError('required')">
<strong>Please enter your Message</strong>
</mat-error>
</mat-form-field>
</div>
</div>
<div class="row margin-top20">
<div class="col l6 push-l6 s12 right-align">
<button type="submit" mat-button class="btn btn-primary">Send</button>
</div>
</div>
</form>
每当我调用 contactForm.reset() 时，值都会被清除，但所有错误都会再次出现。
我尝试了各种其他方法来清除它，如下所示:
尝试在表单重置
initContactForm()尝试遍历每个表单控件并使用 markAsUntouched()、markAs Pristine() 等，
在这里
Object.keys(this.contactForm.controls).forEach(key => {
this.contactForm.controls[key].setErrors(null);
this.contactForm.controls[key].updateValueAndValidity();
});
我还有什么可以尝试的吗？我在reset后仍然无法清除错误。希望得到一些帮助。
26
4
0
我正在尝试使用谷歌浏览器的 Trace Event Profiling Tool分析我正在运行的 Node.js 应用程序。选择点样本后，我可以在三种 View 之间进行选择: 自上而下(树) 自上而
对于一个可能是菜鸟的问题，我们深表歉意，但尽管在 SO 上研究了大量教程和其他问题，但仍找不到答案。 我想做的很简单:显示一个包含大量数据库存储字符串的 Android ListView。我所说的“很
我已经开始了一个新元素的工作，并决定给 Foundation 5 一个 bash，看看它是什么样的。在创建带有水平字段的表单时，我在文档中注意到的第一件事是它们使用大量 div 来设置样式。所以我在下
我有一个 Windows 窗体用户控件，其中包含一个使用 BeginInvoke 委托(delegate)调用从单独线程更新的第 3 方图像显示控件。 在繁重的 CPU 负载下，UI 会锁定。当我附加
我有一堆严重依赖dom元素的JS代码。我目前使用的测试解决方案依赖于 Selenium ，但 AFAIK 无法正确评估 js 错误(addScript 错误不会导致您的测试失败，而 getEval 会
我正在制作一款基于滚动 2D map /图 block 的游戏。每个图 block (存储为图 block [21][11] - 每个 map 总共 231 个图 block )最多可以包含 21 个
考虑到以下情况，我是前端初学者: 某个 HTML 页面应该包含一个沉重的图像(例如 - 动画 gif)，但我不想强制客户缓慢地等待它完全下载才能享受一个漂亮的页面，而是我更愿意给他看一个轻量级图像(例
我正在设计一个小软件，其中包括: 在互联网上获取资源， 一些用户交互(资源的快速编辑)， 一些处理。 我想使用许多资源(它们都列在列表中)来这样做。每个都独立于其他。由于编辑部分很累，我想让用户(可能
我想比较两个理论场景。为了问题的目的，我简化了案例。但基本上它是您典型的生产者消费者场景。 (我关注的是消费者)。 我有一个很大的Queue dataQueue我必须将其传输给多个客户端。 那么让我们
我有一个二元分类问题，标签 0 和 1(少数)存在巨大不平衡。由于测试集带有标签 1 的行太少，因此我将训练测试设置为至少 70-30 或 60-40，因此仍然有重要的观察结果。由于我没有过多地衡量准
我是一名优秀的程序员,十分优秀！