如何验证 Angular 表单的主体是否以特定字符串开头和结尾。

huangapple
go评论98阅读模式
英文:

How to validate if the body of the angular form starts and ends with particular string

问题

I've to take input from the user that starts with a particular string let's say XYZ and has business data in between and ends with ENDXYZ within the textview and I'm using angular framework for the UI

  1. <div class="mb-3 col-md-5">
  2.         <label for="bodyData" class="form-label">Body <span class="text-danger">*</span></label>
  3.         <div class="wrapper">
  4.           <textarea class="form-control" formControlName="bodyData"> </textarea>
  5.         </div>
  6. </div>

the ts part:

  1. bodyData: ['',
  2.         Validators.required
  3.       ]

I thought I may use regex for the validation but I'm new to the angular framework so looking if there are any better ways to achieve it.

英文:

I've to take input from the user that starts with a particular string let's say XYZ and has business data in between and ends with ENDXYZ within the textview and I'm using angular framework for the UI

  1. &lt;div class=&quot;mb-3 col-md-5&quot;&gt;
  2.         &lt;label for=&quot;bodyData&quot; class=&quot;form-label&quot;&gt;Body &lt;span class=&quot;text-danger&quot;&gt;*&lt;/span&gt;&lt;/label&gt;
  3.         &lt;div class=wrapper&gt;
  4.           &lt;textarea class=&quot;form-control&quot; formControlName=&quot;bodyData&quot;&gt; &lt;/textarea&gt;
  5.         &lt;/div&gt;
  6. &lt;/div&gt;

the ts part:

  1. bodyData: [&#39;&#39;,
  2.         Validators.required
  3.       ]

I thought I may use regex for the validation but I'm new to the angular framework so looking if there are any better ways to achieve it.

答案1

得分: 1

使用内置的角度模式验证，你可以简单地这样做。

  1. bodyData: ['',
  2. [Validators.required, Validators.pattern(^XYZ.*\.XYZ$)]
  3. ]
英文:

You can simply do this using inbuilt angular pattern validation.

  1.     bodyData: [&#39;&#39;, 
  2.     [Validators.required, Validators.pattern(^XYZ.*\.XYZ$)]
  3.     ]

答案2

得分: 1

Method 1:您可以直接检查内联：

  1.  bodyData: ['',
  2.         Validators.required, Validators.pattern(`your_pattern`)
  3.       ]

Method 2: 您可以创建自定义验证器并检查您的情况：

在您的ts文件中：

  1. import {MatchStringValidator} from './match-validator';
  2. ....
  3. bodyData: ['',
  4.         Validators.required
  5.       ]

验证器：

  1. import {Validator} from @angular/forms;
  3. export class MatchStringValidator implements Validator {
  4.     validate(string) {
  5.      // 正则表达式逻辑以匹配您的条件
  6.   }
英文:

Method 1:You can directly check inline:

  1.  bodyData: [&#39;&#39;,
  2.         Validators.required, Validators.pattern(`your_pattern`)
  3.       ]

Method 2: You can create a custom validator and check for your scenario:

In your ts:

  1. import {MatchStringValidator} from &#39;./match-validator&#39;;
  2. ....
  3. bodyData: [&#39;&#39;,
  4.         Validators.required
  5.       ]

Validator:

  1. import {Validator} from @angular/forms;
  3. export class MatchStringValidator implements Validator {
  4.     validate(string) {
  5.      // regex logic to match your criteria
  6.   }

答案3

得分: 0

你可能需要 https://angular.io/api/forms/Validators#pattern

你也可以编写自定义验证器。它只是一个带有单个控件参数的箭头函数，如果有错误，则返回一个包含错误的对象对象。

  1. export declare interface ValidatorFn {
  2.     (control: AbstractControl): ValidationErrors | null;
  3. }
英文:

you probably want https://angular.io/api/forms/Validators#pattern

you can also write custom validators. it's just an arrow function with a single control argument, returning an object object with errors if any

  1. export declare interface ValidatorFn {
  2.     (control: AbstractControl): ValidationErrors | null;
  3. }

huangapple
  • 本文由 发表于 2023年5月25日 18:06:26
  • 转载请务必保留本文链接：https://go.coder-hub.com/76331103.html
  • angular
  • angular-forms
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定