我有一个如下所示的基本表单。我调用一个API来获取用户的个人信息，并希望用适当的值填充表单域。我一直在尝试使用patchValue，但是我不能让它工作。
<form (ngSubmit)="onSubmit" class="example-form" [formGroup]="firstFormGroup" #registerForm="ngForm">
<mat-form-field class="example-full-width">
<input matInput
浏览 0提问于2018-08-09得票数 1
回答已采纳
6回答
我正在使用angular5 reactivemodule在我的应用程序中显示一个表单。我还使用了必需的验证器，这将使字段随后以红色显示，并向用户显示错误消息。
它按预期工作，但当我使用
this.form.reset()
该表单向我显示了一个验证错误，即需要特定字段。我还使用了form.markAsPristine()或form.markAsUntouched()来使其工作，但是在应用多个可能的对组合之后，问题仍然存在。
example.html
<form [formGroup]="checkForm" (ngSubmit)="submitForm()&
浏览 2提问于2018-04-12得票数 17
2回答
角模板内反应形式
、、、
在我们的应用程序中，我注意到表单的HTML中有很多重复的代码，大多数输入元素都有相同的结构，所以我想创建一个通用的输入组件，我们可以用它来保持文件的干净。
我目前遇到的问题是，有一个表单中有2个嵌套的formGroups，例如：
this.addressForm = this.fb.group({
postalAddress: this.fb.group({
street: ["", [Validators.required]],
}),
visitorAddress: this.fb.group({
street: [""],
浏览 2提问于2022-03-24得票数 1
2回答
我正在使用角度形式来创建一个寄存器形式。我已经做了一个自定义验证器，它检查密码是否与确认密码字段相同。虽然“密码不匹配”的错误没有显示，但在输入所有字段之前，输入仍然是红色的。
具有自定义验证器方法checkPasswords的表单生成器
this.registerForm = this.formBuilder.group({
firstName: ['', Validators.required],
lastName: ['', Validators.required],
email: ['', [Validators.requir
浏览 2提问于2019-10-17得票数 0
回答已采纳
我的Material table中有以下代码 <ng-container matColumnDef="columnDef">
<th mat-header-cell *matHeaderCellDef>Column heading</th>
<td mat-cell *matCellDef="let row">
<mat-form-field>
<input matInput [(ngModel)]="row.myField"&
浏览 33提问于2019-12-23得票数 9
回答已采纳
2回答
当有错误(由formControl控制)时，我尝试显示错误消息和错误图标。但是，如果表单是在不接触字段的情况下被提交的，则不会显示错误。
或者这是我的密码：
app.component.ts
ngOnInit() {
this.formGroup = new FormGroup({
email: new FormControl(null, [Validators.required, Validators.email]),
});
}
get emailHasError() {
return (
!this.formGroup.get('
浏览 14提问于2022-04-10得票数 1
1回答
创建地址自定义表单控制器并在CustomerForm内部使用，同时提交表单时不填写任何内容，获取客户代码和客户名称的必填字段的mat错误，不获取Address1、国家、城市和邮政编码中的必填字段的任何mat错误。
我曾尝试添加一个自定义验证器，该验证器显示地址的组合错误。但它并没有解决我的问题，因为它总是显示错误地址，直到地址的所有必填字段都填满为止。
customer.component.html
<form (ngSubmit)=" custForm.valid && saveOrUpdateCustomer()" [formGroup]="c
浏览 0提问于2019-10-02得票数 2
1回答
我尝试使用一个FormGroups数组来验证我的表单。
在添加FormGroups数组(材料步进器验证目的)之前，它是有效的。
HTML：
<form [formGroup]="formGroup" (ngSubmit)="submit()">
<mat-form-field>
<input matInput formControlName="fullName" required>
<mat-error *ngIf="formGroup.controls.formArray.con
浏览 11提问于2019-07-27得票数 0
回答已采纳
3回答
输入时角反应形式验证
、、、
我正在处理这个表单，希望在输入时进行验证。目前的行为是，我选择输入，键入，当我点击其他网站，然后它显示的错误。我认为当我设置控制时，它会发生错误，有效和肮脏，但我无法弄清楚。
类型标
buildForm(): void {
this.userForm = this.fb.group({
'email': ['', [
Validators.required,
Validators.pattern('[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$')
]
],
'passwo
浏览 0提问于2018-05-08得票数 7
正如您所知道的，当我们在Angular中创建具有反应式表单的表单时，我们将formcontrolname分配给元素，并手动创建表单控件，如下所示：
<form [formGroup]="ntForm" (change)="onChange($event)" (ngSubmit)="onSubmit()" class="nt-form">
<mat-form-field class="example-full-width">
<input matInput placeh
浏览 12提问于2018-08-08得票数 0
“@角/形式”："^4.4.6"，“@角/物质”："^2.0.0-beta.12"
尝试验证表单组中两个字段的数组，比较它们的范围(应该在左侧值和右边值与数值之间)。数值是工作的，但范围检查使用自定义验证错误使用mat-错误消息为该特定的字段不显示。
喜欢
*ngIf="xxxDismissForm.get('xxx.value.1.value').hasError('betweenRangeIncorrect')“
根据自定义验证条件和模板中的打印设置为真/假，但md-错误字段消息没有显示.
是一个错误的垫子错误
浏览 1提问于2017-10-27得票数 0
回答已采纳
我使用文本区域显示来自字符串的地址，作为预先填充的输入字段。
<mat-form-field>
<textarea matInput placeholder="Address" formControlName="businessaddress" value="{{address}}"></textarea>
<mat-error *ngIf="businessForm.controls.businessaddress.hasError('r
浏览 0提问于2018-08-21得票数 2
回答已采纳
我有两个反应形式在我的角度应用程序。
我想有条件地显示<mat-error>消息。
在我的第一个表单中，我没有遇到任何问题，但在第二个表单中，它只显示当窗体控件被触摸时。
第一次表单的工作方式是
<div class="form-container__form__field">
<mat-form-field class="form-input">
<input type="text" autocomplete="on"
formControlName=&
浏览 0提问于2019-01-24得票数 1
我有一个反应式表单，我想用<mat-error>显示不同的错误消息，但我不知道怎么做。我已经搜索了一下。 TS： selectDataFormGroup: FormGroup = this.formBuilder.group({
headerCoordinate: ['', [
Validators.required,
Validators.pattern(/^.+:.+$/)
]
],
contentCoordinate: ['', [
Validators.
浏览 19提问于2020-01-09得票数 0
回答已采纳
我有登录page.When用户输入错误的密码，服务器发送错误响应.How我可以在popup.Any帮助中显示错误消息或登录失败消息吗
//登录.ts文件
onLoginSubmit() {
this.submitted = true;
if (this.loginForm.invalid) {
return;
} else {
const logCredential = {
username: this.loginForm.get('username').value,
password: this.
浏览 1提问于2019-07-24得票数 0
我在html中重复了angular material的输入域，因此我使用<mat-error>来显示错误消息。
我实际上在我的代码中使用了模板驱动的表单，看看我到目前为止创建的带有输入域的表单：
<div *ngFor="let distanceVal of distanceArray;let i=index" layout-gt-xs="row">
<div flex="30" flex-offset="15">
<mat-form-field >
浏览 0提问于2018-03-31得票数 2
1回答
我想在点击提交按钮时显示验证错误。我尝试使用markAllAsTouched()函数，但它不起作用。只有在接触字段之后，才会比较错误
Html：
<ion-content >
<div class="ion-text-center tab1-padding">
<form [formGroup]="newCat" (ngSubmit)="logForm()">
<mat-form-field appearance="outline&
浏览 0提问于2019-10-19得票数 0
将带有输入的子组件放置在父窗体中并以无效方式提交时，不会仅在父窗体中显示子组件中的错误。仅当单击输入时，子项中的mat-error才会显示。
使用此父窗体复制错误
@Component({
selector: 'lyx-parent-form',
template: `
<form novalidate autocomplete="off" role="form" [formGroup]="form" (ngSubmit)="onSubmit()">
<ma
浏览 7提问于2018-01-27得票数 4
回答已采纳
问题是，即使我将字段留空并移动到另一个字段，错误消息也不会显示。我找不到我在这里做错了什么。任何帮助都将不胜感激。如果我将断点放在onFormValuesChanged()上，它永远不会命中断点。我已经尝试在构造函数中移动form的构建部分，但没有任何影响。我不确定表单的值更改事件是否在字段值更改时触发 角度版本：- 5.2.1 HTML代码 <div>
<form [formGroup]="formPersonalRecord">
<mat-input-container class="full-width-inp
浏览 65提问于2018-01-25得票数 8
回答已采纳
1回答
简化的情况是，在我的表单中，我有两个字段--A和B。
字段A是必需的，并且启用。字段B也是必需的，但是是禁用的，并且由于字段A中输入的数据，只能(动态地)填充，在某些情况下出现的ad可以被解析为NULL。
除非两个字段都被填充，否则用户不应该能够提交表单，因此我需要向字段B(禁用/动态填充)添加所需的验证。
虽然所需的验证对于已启用的字段很好，但对于禁用的字段，它似乎被忽略了。
<mat-form-field>
<input name="FieldA" matInput formControlName="FieldA" placeholde
浏览 0提问于2019-02-05得票数 3
回答已采纳
1回答
我是第一次接触angular，我正在尝试验证一个小的表单.In，这种情况下，一切都很好。
我想要做的是，如果用户单击保存按钮而没有接触表单域，我希望只在第一个域中显示错误消息，而不是所有域。
现在，它在所有字段中显示错误消息，这会破坏外观。
所以如何显示错误信息在第一个字段，如果用户点击保存按钮没有输入任何东西在form.It应该工作，如果用户输入的东西在第二个字段，并单击保存按钮它首先显示错误信息在第一个字段，如果用户再次点击保存按钮，它应该显示错误信息在第三个字段，因为第二个是验证之前。
app.component.ts
export class InputErrorStateMatche
浏览 0提问于2018-09-20得票数 1
2回答
我想限制输入名称为45，并显示消息的限制超过。下面我是附加我的html文件和ts文件。我用角10。还有其他方法可以限制输入和显示警告消息。谢谢
newUserRegForm = new FormGroup({
'username': new FormControl('', Validators.required , Validators.maxLength(45)),
'password': new FormControl('', Validators.required),
'cpassword':
浏览 14提问于2022-11-21得票数 1
我无法删除单参数表单域，但我可以删除多参数表单域
<ng-container *ngSwitchCase="'input'">
<ng-container *ngIf="param.allowMultiple; else singleParam">
<mat-form-field [formArrayName]="param.name" *ngFor="let control of controls(param); let i=index"
appearance
浏览 2提问于2021-03-09得票数 1
2回答
密码和确认不匹配，如果表单无效，则按钮将被禁用，但<mat-error>中的消息仍未显示。
模板文件
<mat-form-field class="full-width" appearance="outline">
<mat-label>Password</mat-label>
<input type="password" formControlName="password" matInput required />
浏览 4提问于2021-02-17得票数 0
2回答
我想使用mat错误渲染服务器端错误在我的角度5 SPA.
到目前为止，这就是我所得到的，而且效果很好
<mat-form-field class="col-6">
<input matInput formControlName="firstName">
<mat-error [hidden]="!form.controls.firstName.hasError('required')">This field is required and cannot be empty</
浏览 1提问于2018-05-22得票数 8
回答已采纳
我在表单#1中得到:输入和选择。在表单#2中，相同的字段和复选框。当我单击复选框时，如何将表单#1的值传递给表单#2？ HTML代码： <mat-form-field>
<input matInput placeholder="Nombre" formControlName="names" required>
<mat-error *ngIf= "f?.names?.errors?.required">
Name field empty or not valid, please check
浏览 16提问于2019-01-24得票数 0
回答已采纳
我正在尝试实现一个计数器表单字段。它有两个按钮；一个用于递增计数值，另一个用于递减它。到目前为止，实现非常简单。
<mat-form-field>
<button matPrefix mat-icon-button (click)="onDecrement()">
<mat-icon svgIcon="remove"></mat-icon>
</button>
<input type="number" matInput [formContr
浏览 11提问于2022-02-19得票数 0
回答已采纳
2回答
如果单击了字段，则仅显示错误或显示需要的错误，但现在在我当前的实现中，当调用setRequiredVlidations并加载组件时，已经显示了has required消息，如您在图像上所见。它应该只在我单击输入字段或字段是触摸时才会显示。
用户在前端有选项，如果他选择选项1，那么验证器是请求的，如果他点击选项2，那么验证器不是请求的。我的问题是，当设置验证器时，它在用户单击字段之前就已经显示了，它应该只在用户触摸字段时显示
if(option == 1) {
this.setRequiredVlidations();
}
initFormGroup() {
this.modelFor
浏览 4提问于2021-07-07得票数 0
我想在用户开始在输入元素上写东西之后显示mat-error。以下是我的代码：
<mat-form-field appearance="outline">
<mat-label>Password</mat-label>
<input matInput type="password" placeholder="Password" required [(ngModel)]='model.password' #password='ngModel' name='
浏览 0提问于2019-01-20得票数 8
回答已采纳
我有一个类似下面的输入，绑定了一个反应式表单控件：
<mat-form-field appearance="fill" floatLabel="always" fxFlex>
<mat-label>My field</mat-label>
<input
matInput
#input="matInput"
[formControl]="amountControl"
[errorStateMatcher]="cust
浏览 2提问于2019-05-17得票数 2
当用户在angular文本区输入时，我们如何检查字符总数？ 当用户输入他的数据时，文本区将检查输入的字符总数，如果超过1000个字符，将显示错误，如果超过1000个字符，则显示now，允许用户添加更多字符。 #代码 <mat-form-field appearance="outline" class="pr-4" fxFlex hintLabel="Max 1000 characters">
<mat-label>Reason</mat-label>
浏览 25提问于2020-06-24得票数 0
我正在使用一个angular 6应用程序。我和FormBuilder一起工作。我有一个表单，看起来像这样： <form [formGroup]="createInvitationForm" (ngSubmit)="createInvitation()">
<mat-form-field class="full-width-input">
<input matInput type="text" formControlName="invitationComment"
浏览 26提问于2019-02-21得票数 0
回答已采纳
我有一个子组件调用应用程序帐户，包括一个带有一些输入字段验证器的提交表单，如下所示
this.user = this.fb.group({
usrname: new FormControl('', Validators.compose([Validators.required])),
password: new FormControl('', Validators.compose([Validators.required, Validators.minLength(6)]))});
在HTML模板中
<form [formG
浏览 0提问于2018-07-03得票数 0
回答已采纳
2回答
我有2个日期时间选取器，endDate不能小于startDate
endDateAfterOrEqualValidator(formGroup): any {
var startDateTimestamp: number;
var endDateTimestamp: number;
startDateTimestamp = Date.parse(formGroup.controls['startDateForm'].value);
endDateTimestamp = Date.parse(formGroup.controls['endD
浏览 0提问于2017-11-29得票数 12
回答已采纳
当我说这个：
<textarea #name="ngModel" class="form-control" id="" cols="30" rows="3" style="resize:none" required></textarea>
<div *ngIf="name.invalid" class="alert alert-danger">
<div *ngIf="name.errors.required
浏览 1提问于2019-02-26得票数 1
回答已采纳
这是我的组件add-customer.component.html
<form [formGroup]="addCusForm">
<div id="login-container">
<h2 class="add-title">Customer Details</h2>
<mat-form-field class="example-full-width">
<input matInput plac
浏览 0提问于2018-08-10得票数 1
回答已采纳
我有一个stepper表单，在第一步中，用户需要使用Angular Material design Datepicker组件选择日期。
当用户进入下一步时，我希望绑定他们选择的值，并将其再次显示在输入字段的顶部(他们也应该能够在此处更改它)。
我尝试过[(ngModel)]，但不确定我是否正确使用它。
<mat-form-field>
<input [(ngModel)]="date" formControlName="dateFormCtrl" matInput
[matDatepicker]="picker"
浏览 1提问于2018-04-20得票数 2
13回答
我的页面上有一个表单，当我调用FormGroup.reset()时，它将forms类设置为ng-pristine ng-untouched，但是FormControl.hasError(...)仍然返回truthy。我在这里做错什么了？
模板
<form [formGroup]="myForm" (ngSubmit)="submitForm(myForm)">
<mat-form-field>
<input matInput formControlName="email" />
<ma
浏览 8提问于2018-01-11得票数 109
回答已采纳
在我增加了一个值之后，我试图重新设置一个表单。
表单代码片段
<form [formGroup]="addAttributeForm" fxLayout="column">
<mat-form-field>
<input matInput formControlName="title" placeholder="Title" required>
<mat-error>This field is required</mat-error>
浏览 1提问于2017-11-08得票数 12
回答已采纳
1回答
我开始学习角，我正在练习角。为此，我创建了一个与表单相关的应用程序。我可以创建一个表单并保存它，然后我可以显示它。
我的问题是现在，我试图阻止，例如，提交20多份表格。在20份表单之后，我想显示一条错误消息。
为此，我创建了几个函数，但它们在HTML中工作得不够好。我的密码在下面。
post-create.component.ts
export class PostCreateComponent {
private postCounter = 0;
@Output() postCreated = new EventEmitter<Post>();
onAddP
浏览 0提问于2019-01-13得票数 0
回答已采纳
1回答
当页面第一次加载时，我有一个表单，其中三个输入(两个字段和一个复选框)是ng-invalid。复选框是我最关心的， (“这个字段是必需的”)。ng-invalid作为类设置红色边框，而ng-valid设置灰色边框(我想要)。
页面上还有其他一些字段，但是它们是禁用的，既不无效也不有效。
什么将表单字段设置为ng-invalid？我怀疑我的FormGroup和控件的设置有什么问题，但我不知道是什么原因。我注意到ng-invalid被添加到FormGroup本身，所以对我来说，解决这个问题的关键是解决这个问题。
component.ts
constructor(
private cd
浏览 4提问于2022-01-26得票数 0
1回答
我创建了一个动态表单，您可以在其中添加或删除具有专用按钮的字段：
问题是，当我们添加一个新字段时，会立即触发表单验证，从而显示错误消息：
只有当用户尝试在出现错误时提交表单时，我才会触发它。当然，如果存在错误，则不能提交表单(Validators.required，nicknameValidator())。
下面是在表单中生成新行的代码：
createNicknameFormGroup(): any {
return new FormGroup({
nickname: new FormControl('', Validators.required
浏览 3提问于2020-11-05得票数 1
回答已采纳
我想在<mat-error>中显示它是什么样的错误。
primaryFormGroup = this.fb.group({
hourlyRate: ['', [Validators.requiredTrue, Validators.max(200)]],
});
<mat-form-field [formGroup]="this.primaryFormGroup">
<label><input formControlName="hourlyRate" autocomplete="off&#
浏览 2提问于2019-11-05得票数 0
回答已采纳
1回答
我试图要求至少一个输入，所以如果用户填写了一个输入，那么从两个输入中删除错误。这是我的HTML
<form [formGroup]=form>
<input formControlName="firstName" matInput required>
<mat-error *ngIf="firstNameControl.hasError('required')">
Name can't be empty
</mat-error>
<input formControlNam
浏览 0提问于2020-08-11得票数 3
回答已采纳
我使用的角度材料6，我有一个内部验证mat-form-field mat-error不显示，当移动后mat-form-field到mat-error是正确显示。
不起作用的代码：
<mat-form-field>
<input matInput type="time" formControlName="ToTime"/> <mat-error *ngIf="DaterForm.get('ToTime').hasError('InValidToTime')">FromTime S
浏览 6提问于2018-07-21得票数 20
回答已采纳
2回答
:)
我正在使用angular材质编写一个angular8 web应用程序。
我使用ReactiveForms构建一个FormGroup，以便验证它的字段。
我有两个字段To Date和To Time，如果我试图提交表单而没有填写它们，用户会看到一个错误，指示他需要填写这些值。
在它们下面，我有一个名为Now的按钮，可以很好地设置日期和时间字段。到现在:)
如果我先按下submit，得到下面的<mat-error>消息，它们是空的，然后按下'Now‘按钮，字段正在被填充，但错误消息不会消失。有没有办法重新测试这两个表单域？
这是我的表单，其中包含输入元素和now按钮的相关代
浏览 18提问于2019-07-16得票数 0
回答已采纳
1回答
我有一个用FormBuilder构建的角度表单，模板中设置了实质性的角度错误信息。我可以让验证错误消息显示出来。但他们并没有阻止我提交表格。他们不应该以某种方式把提交按钮弄暗吗？还是我必须手动地将这种逻辑放入其中？
下面是在组件ts文件中构建的表单：
ngOnInit(): void {
this.form = this.fb.group({
name: ['',
Validators.required,
this.isDupeField("name")
],
iso2: ['',
[
Valida
浏览 3提问于2022-09-02得票数 -1
回答已采纳
1回答
我有一个反应性的形式，我试图得到这个值，并将它赋值给一个变量，该变量的类型是在接口中定义的。尽管如此，此表单是使用Google填充的(因此所有表单控件都被用户禁用和不可编辑，除了第一个表单控件--该控件是用户输入初始地址的字段)。
反应形式如下：
ngOnInit() {
// Initialization of branch Address reactive form (Form 2 - Step 2)
this.addBranchAddressReactiveForm();
}
// Form Group 2 - Branch Address (Step 2)
a
浏览 6提问于2021-08-11得票数 3
回答已采纳
1回答
我有一个包含电子邮件的表单，当我保存表单时，我调用onRegisterFormSubmit函数，在这个函数中，我得到api返回的错误，然后我在电子邮件控件中设置错误并获得消息，在html中，我检查控件是否有错误以显示消息，但如果出现错误，则不显示消息。
export class MyErrorStateMatcher implements ErrorStateMatcher {
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
co
浏览 0提问于2020-05-11得票数 0
我为我的注册表单创建了一个asyc验证器，并将它连接到我的express应用程序，以便它返回正确的响应，现在我进入了最后一步，所有的表单控件都是有效的，但是表单本身没有得到验证，提交按钮仍然是禁用的，下面是我的代码
register.component.ts
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { AuthService }
浏览 1提问于2020-10-24得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
