标签: angular-validation

当我们继续在文本框中输入内容时，电子邮件验证被触发。我希望当用户将焦点移到文本框之外时触发此验证

下面是我的代码：

<input class="form-control" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$"
 name="Email" type="email" [(ngModel)]="model.Email" #Email="ngModel" required>

<div class="red" *ngIf="Email.errors && (Email.dirty || Email.touched)">
     <div [hidden]="!Email.errors.pattern">
         Please enter a valid email.
     </div>
</div>

请建议我该如何实现。提前致谢。

Angular形式中的元素有可能进入dirty状态而不是touched吗？我的模板中有一些代码,根据这个问题的答案,可能是多余的.

<input class="form-control" #fName="ngModel" required />
<div *ngIf="fName.invalid && (fName.dirty || fName.touched)" class="form-error">
    First name is required
</div>

这*ngIf在此div,例如,可以简化为fName.invalid && fName.touched如果没有这样的东西作为一个肮脏的,不变的形式控制.

我有一系列表单(每个表单由1个组件管理).

这些表单中有一种输入模式(例如,其中许多都需要允许输入地址),我必须重构为可重用的组件,因为它们以多种形式使用,我不想复制它们的逻辑也不是他们的模板

每个可重用的组件都必须这样做

1. 有它的逻辑
2. 它的模板包含输入标签而没有<form>标签
3. 有其客户端验证限制
4. 可能从其父级接收初始值
5. 能够将其字段的值作为对象返回到父对象(例如address: {street: "...", "city": "...", ...})
6. 如果不满足其验证约束,则使父表单无效
7. 一旦用户更改了其值,就使其"触摸"

从本教程为Angular2,我在了解如何实现目标1,2和4.

本教程中的解决方案还允许实现其他目标,但它通过从父级执行所有操作来实现(请参阅参考资料app.component.ts#initAddress).

我怎样才能实现3,5,6和7,而孩子中声明控件和它们的约束？

我有一个使用自定义组件作为输入的表单，它接收 ControlName。当我在组件中键入内容时，它不会更新“错误”属性。

应用程序-pf-input-text.ts：

import { Component, OnInit, Input } from \'@angular/core\';\n\n@Component({\n  selector: \'app-pf-input-text\',\n  templateUrl: \'./pf-input-text.component.html\',\n  styleUrls: [\'./pf-input-text.component.scss\']\n})\nexport class PfInputTextComponent implements OnInit {\n\n  @Input() id: string;\n  @Input() name: string;\n  @Input() value: string;\n  @Input() placeholder: string;\n\n  //falta trim\n\n  @Input() maxlength: string;\n  @Input() minlength: string;\n\n  @Input() disabled: boolean;\n  @Input() required: boolean;\n\n  constructor() { }\n\n  ngOnInit() {\n  }\n}\n

app-pf-input-text.html：

<div class="input-group">\n  <input \n      type="text" class="form-control">\n</div>\n

我的表格：

import { Component, OnInit, Input } from \'@angular/core\';\n\nimport { FormArray, FormBuilder, FormGroup, …

我已经为此战斗了两天。我只是不知道怎么了。看来我的自定义验证程序未执行。

如果您仅按下“下一步”按钮，则每个控件均以红色边框突出显示。如果填写表单，请在电子邮件字段中键入不同的值，然后按“下一步”，该表单是有效的，并且自定义电子邮件验证程序中看不到任何console.log。

https://stackblitz.com/edit/angular-nwhgpb

我正在使用反应式角度表单并创建了新的自定义表单验证器，但它没有显示自定义消息我想为自定义验证器添加自定义消息。

我试图忽略静态消息我希望将该消息添加到该验证器本身中，以便它可以在我使用该验证器的任何地方显示。

自定义验证器代码：

import { FormControl } from '@angular/forms';

export function validateJson(input: FormControl): object | null {
    try {
        if (input.value) {
            JSON.parse(input.value);
        }

        return null;
    } catch (error) {
        return { invalidFormat: true };
    }
}

我正在尝试使用 angular 中的正则表达式来验证电话号码

HTML 内容

<div class="form-group row">
                <input type="text" class="form-control" appPhoneMask placeholder="Mobile Number" autocomplete="off"
                    [ngClass]="{ 'is-invalid': (f.inputCountryCode.errors && mobileNumberform.submitted) }"
                    formControlName="inputCountryCode">
                <div *ngIf="(f.inputCountryCode.invalid ) || (f.inputCountryCode.invalid && (f.inputCountryCode.dirty || f.inputCountryCode.touched))"
                    class="invalid-feedback">
                    <div *ngIf="f.inputCountryCode.errors.required">This field is required.</div>
                    <div *ngIf="f.inputCountryCode.errors.pattern">Invalid phone number.</div>
                </div>
            </div>

TS代码

 this.$form = this.$builder.group({
      selectCountryCode: [null, Validators.required],
      inputCountryCode: [null, [Validators.required, Validators.pattern("[0-9 ]{12}")]]
    });

验证模式应该允许带空格的数字，因为我使用的是电话号码屏蔽，它在 3 位数字后添加了空格。

该模式不起作用，不断让电话号码验证为假

Angular 4 手机号码验证

允许数字和空格的字段的正则表达式

屏蔽指令

export class PhoneMaskDirective {

  constructor(public ngControl: NgControl) { }

  @HostListener('ngModelChange', ['$event'])
  onModelChange(event) {
    this.onInputChange(event, false); …

这是我的代码

detailsGroup = new FormGroup({
    userId:new FormControl('1'),
    firstName: new FormControl('', Validators.required),
    lastName: new FormControl('', Validators.required),
    email: new FormControl('',[ Validators.required, Validators.email]),
  });

我希望如果userId equal to 1名字、姓氏和电子邮件不需要， otherwise这 3 个字段将更改为必填，并且电子邮件还验证电子邮件地址。

谢谢

假设我有一个带有一些字段的简单表单（Stackblitz 示例）：

@Component({
  selector: 'my-app',
  template: 
`
<h1>AppComponent</h1>

<form>
  <h2>UserData</h2>
  <userdata [user]="model.userData"></userdata>

  <h2>Actions</h2>
  <actionbar ></actionbar>
</form>
`,
})
export class AppComponent  { ... }

@Component({
  selector: 'userdata',
  template: 
`
<span class="status {{name.status}}">{{name.status}}</span>
full name:
<input name="name" #name="ngModel" pattern="^.* .*$" required [(ngModel)]="user.name">
<br>

<h3>--- Contacts ---</h3>

<span class="status {{email.status}}">{{email.status}}</span>
email:
<input name="email" #email="ngModel" type="email" [email]="true" [(ngModel)]="user.contacts.email">
<br>


<span class="status {{phone.status}}">{{phone.status}}</span>
phone:
<input name="phone" #phone="ngModel" pattern="^[0-9]*$" [(ngModel)]="user.contacts.phone">
<br>


<h4>---- Address ----</h4>

<span class="status {{street.status}}">{{street.status}}</span>
street:
<input name="street" #street="ngModel" [(ngModel)]="user.contacts.address.street">
<br> …

我正在尝试在表单组中写入表单控件特定的验证错误消息。我在网上找到了几个教程和示例（例如这个），概述了一个看似简单的 *ngIf div，如果在控件上检测到错误，则显示错误消息。

问题是，当我尝试这样做时，我收到这个奇怪的错误

NG5002: Parser Error: Conditional expression port?.errors?['required'] requires all 3 expressions at the end of the expression

我在此页面上还有其他几个可以正常工作的 *ngIf 条件。这是我的相关代码

                <form-field labelText="Port" [hasError]="port?.invalid && (port?.dirty || key?.touched)" [isRequired]="true">
                    <input id="port" formControlName="port" type="password">
                    <ul *ngIf="port?.invalid && (port?.touched || key?.dirty)">
                        <li *ngIf="port?.errors?['required']">Port is Required</li>
                        <li *ngIf="port?.errors?['pattern']">Invalid Port Number</li>
                    </ul>
                </form-field>

    ngOnInit() {
        this.store.dispatch(SettingsActions.enterMaintenance());
        this.detailsForm = new FormGroup({
            id: new FormControl(''),
            name: new FormControl('', Validators.required),
            productName: new FormControl('', Validators.required),
            number: new FormControl('', Validators.required),
            isSamlAuthRequired: new FormControl(Boolean),
            iAdapterSetting: new …