angular - Angular 8 反应式表单验证
问题描述
我在CustomerAdd.html中使用反应式表单。
<form [formGroup]="CustomerProfileModel.FormCommonGroup">
<div class="col-12 tab-content">
<div class="row">
<div class="col-md-10">
<div class="form-group row m-b-10 m-t-20">
<label class="col-2 text-md-right col-form-label">Legal Name *</label>
<div class="col-4">
<input type="text" name="CommonLegalNameControl" required minlength="4" placeholder="" class="form-control" formControlName="CommonLegalNameControl" [(ngModel)]="CustomerProfileModel.LegalName">
<div *ngIf="CommonLegalNameControl?.invalid && (CommonLegalNameControl?.dirty || CommonLegalNameControl?.touched)" class="alert alert-danger">
<div *ngIf="CommonLegalNameControl?.errors.required">
Name is required.
</div>
<div *ngIf="CommonLegalNameControl?.errors.minlength">
Name must be at least 4 characters long.
</div>
<div *ngIf="CommonLegalNameControl.errors.forbiddenName">
Name cannot be Bob.
</div>
</div>
</div>
</div>
<!-- end form-group row -->
<!-- begin form-group row -->
<div class="form-group row m-b-10">
<div class="col-md-4 offset-md-2">
<!-- <input class="btn btn-sm btn-primary m-r-5" [disabled]="!(CustomerProfileModel.FormCommonGroup.valid)" (click)="AddCompany()" type=button value="Add Customer" /> -->
<input class="btn btn-sm btn-primary m-r-5" (click)="AddCompany()" type=button value="Add Customer" />
<a [routerLink]="['/CustomerProfile']" class="btn btn-sm btn-default">Cancel</a>
</div>
</div>
</div>
<!-- end panel -->
</div>
</div>
</div>
</form>
这是我的模型文件Customer.ts。
import {
NgForm,
FormGroup,
FormControl,
Validators,
FormBuilder
} from '@angular/forms'
export class Customer {
LegalName: string = "";
FormCommonGroup: FormGroup = null;
constructor() {
var _builder = new FormBuilder();
this.FormCommonGroup = _builder.group({}); //Use the builder to create
//control --> validation and 1 validation
this.FormCommonGroup.addControl("CommonLegalNameControl",
new FormControl('', Validators.required));
}
}
正如我在下面的CustomerAdd.html中所说的那样。
<input type="text" name="CommonLegalNameControl" required minlength="4" placeholder="" class="form-control" formControlName="CommonLegalNameControl" [(ngModel)]="CustomerProfileModel.LegalName">
<div *ngIf="CommonLegalNameControl?.invalid && (CommonLegalNameControl?.dirty || CommonLegalNameControl?.touched)" class="alert alert-danger">
<div *ngIf="CommonLegalNameControl?.errors.required">
Name is required.
</div>
<div *ngIf="CommonLegalNameControl?.errors.minlength">
Name must be at least 4 characters long.
</div>
<div *ngIf="CommonLegalNameControl.errors.forbiddenName">
Name cannot be Bob.
</div>
</div>
这似乎不起作用,我对点击方法也遵循了同样的方法。
https://stackblitz.com/edit/angular-7-reactive-form-validation?file=app%2Fapp.component.html
https://stackblitz.com/edit/angular-8-reactive-form-validation?file =app%2Fapp.component.html
在我的表单中它们都没有按预期工作。
更新 1:
下面是我的 CustomerAdd.ts 文件。
import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
import { Customer } from '../_models/Customer '
@Component({
selector: 'CustomerProfileAdd',
templateUrl: './CustomerProfileAdd.html',
styleUrls: ['./CustomerProfileAdd.css'],
})
export class CustomerProfileAdd implements OnInit {
public CustomerProfileModel: Customer = new Customer();
constructor() {
}
async ngOnInit() {
await this.CustomerProfileModel;
}
AddCompany() {
this.submitted = true;
// stop here if form is invalid
if (this.CustomerProfileModel.FormCommonGroup.invalid) {
return;
}
}
}
解决方案
当我再次关注此网址时。
https://stackblitz.com/edit/angular-8-reactive-form-validation?file=app%2Fapp.component.html
现在,当我努力完成时,我错过了一些小点。
<input type="text" formControlName="lastName" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.lastName.errors }" />
<div *ngIf="submitted && f.lastName.errors" class="invalid-feedback">
<div *ngIf="f.lastName.errors.required">Last Name is required</div>
</div>
我所做的一切都很好,因为我错过了这一部分。[ngClass]="{ 'is-invalid': submitted && f.lastName.errors }"
在输入标签中我给了这个以便工作。在CustomerAdd.ts我给了这个。
// convenience getter for easy access to form fields
get f() { return this.CustomerProfileModel.FormCommonGroup.controls; }
推荐阅读
- multithreading - 这个单车道桥问题的解决方案如何不是没有饥饿的?
- vb.net - 根据另一个文本框中的值填充文本框中的值
- python - 模板匹配多个对象opencv python
- c# - 并排显示 DataTable 列 C# 控制台应用程序
- git - 导航到新目录时 Git 分支发生变化
- c - 用strtok解析c中的一行以获得shell
- c - 在 gdb 中哪里可以查看程序计数器 (PC) 和指令寄存器 (IR)
- c++ - Boost C++ - 断言失败:body_.file_.is_open() 并且超出了正文限制
- javascript - 使用谷歌登录后重定向到另一个页面 - Firebase Web
- c# - 使用 iTextSharp Stamper.InsertPage 方法添加页面时如何将页脚添加到 pdf 页面