Error: Uncaught (in promise): TypeError: Cannot read properties of null (reading 'includes')

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

Error: Uncaught (in promise): TypeError: Cannot read properties of null (reading 'includes')

问题

I am new to angular and was learning how to create custom directives. I was handling some email validations in email-validation.directive.ts and found that I am getting this error.

email-validation.directive.ts

  1. import { Directive } from '@angular/core';
  2. import {
  3.   AbstractControl,
  4.   NG_VALIDATORS,
  5.   ValidationErrors,
  6.   Validator,
  7. } from '@angular/forms';
  9. @Directive({
  10.   selector: '[appEmailValidation]',
  11.   providers: [
  12.     {
  13.       provide: NG_VALIDATORS,
  14.       useExisting: EmailValidationDirective,
  15.       multi: true,
  16.     },
  17.   ],
  18. })
  19. export class EmailValidationDirective implements Validator {
  20.   count = 0;
  21.   validate(control: AbstractControl<any, any>): ValidationErrors | null {
  22.     const value = control.value as string;
  24.     if (!value.includes('@') && !value.includes('.com')) {
  25.       return {
  26.         invalidEmail: true,
  27.       };
  28.     }
  29.     return null;
  30.   }
  31.   constructor() {}
  32. }

Here is my code and condition of my directive. I want to check if the email contains @ and .com keywords and if it doesn't, I want to set invalidEmail as true.

Main Component Code

register.component.html

  1. <form #registerForm="ngForm" class="form-container" (ngSubmit)="postData(registerForm)">
  2.   <mat-grid-list cols="1" rowHeight="100vh">
  3.     <mat-grid-tile>
  4.       <div class="example-container">
  5.         <mat-form-field hintLabel="Max 20 characters" appearance="fill" class="width-50">
  6.           <mat-label>First Name</mat-label>
  7.           <input #fname minlength="3" maxlength="20" required [(ngModel]="ad.firstName" type="text" name="firstName"
  8.             matInput placeholder="Enter Your Firstname">
  9.           <mat-hint align="end">{{fname.value.length}}/20</mat-hint>
  10.         </mat-form-field>
  12.         <mat-form-field hintLabel="Max 20 characters" appearance="fill" class="width-50 ml-2">
  13.           <mat-label>Last name</mat-label>
  14.           <input #lname minlength="3" maxlength="20" required [(ngModel]="ad.lastName" name="lastName" type="text"
  15.             matInput placeholder="Enter your Lastname">
  16.           <mat-hint align="end">{{lname.value.length}}/20</mat-hint>
  17.         </mat-form-field>
  18.         <br>
  19.         <mat-form-field appearance="fill" class="width-100">
  20.           <mat-label>City</mat-label>
  21.           <input minlength="3" maxlength="20" required [(ngModel]="ad.city" name="city" type="text" matInput
  22.             placeholder="Enter your City">
  23.         </mat-form-field>
  24.         <br>
  25.         <mat-form-field appearance="fill" class="width-100">
  26.           <mat-label>Age</mat-label>
  27.           <input min="1" max="100" required [(ngModel]="ad.age" name="age" type="number" matInput placeholder="Age">
  28.         </mat-form-field>
  29.         <br>
  30.         <mat-form-field appearance="fill" class="width-100">
  31.           <mat-label>Username</mat-label>
  32.           <input appEmailValidation #user="ngModel" required [(ngModel]="ad.username" name="username" matInput
  33.             placeholder="Enter your username">
  34.           <mat-hint color="warn"></mat-hint>
  35.         </mat-form-field>
  36.         <br>
  37.         <mat-form-field appearance="fill" class="width-100">
  38.           <mat-label>Enter password</mat-label>
  39.           <input required [(ngModel]="ad.password" name="password" matInput [type]=" hide ? 'password' : 'text'">
  40.           <button mat-icon-button matSuffix (click)=" hide=!hide" [attr.aria-label]="'Hide password'"
  41.             [attr.aria-pressed]="hide">
  42.             <mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
  43.           </button>
  44.         </mat-form-field>
  45.         <button [disabled]="registerForm.invalid" mat-raised-button color="primary">Submit</button>
  46.       </div>
  47.     </mat-grid-tile>
  48.   </mat-grid-list>
  49. </form>
  50. {{user.errors | json}}

When I am running the code, I am getting this error Cannot read properties of null.

英文:

I am new to angular and was learning how to create custom directives. I was handling some email validations in email-validation.directive.ts and found that i am geting this error

email-validation.directive.ts

  1. import { Directive } from &#39;@angular/core&#39;;
  2. import {
  3. AbstractControl,
  4. NG_VALIDATORS,
  5. ValidationErrors,
  6. Validator,
  7. } from &#39;@angular/forms&#39;;
  8. @Directive({
  9. selector: &#39;[appEmailValidation]&#39;,
  10. providers: [
  11. {
  12. provide: NG_VALIDATORS,
  13. useExisting: EmailValidationDirective,
  14. multi: true,
  15. },
  16. ],
  17. })
  18. export class EmailValidationDirective implements Validator {
  19. count = 0;
  20. validate(control: AbstractControl&lt;any, any&gt;): ValidationErrors | null {
  21. const value = control.value as string;
  22. if (!value.includes(&#39;@&#39;) &amp;&amp; !value.includes(&#39;.com&#39;)) {
  23. return {
  24. invalidEmail: true,
  25. };
  26. }
  27. return null;
  28. }
  29. constructor() {}
  30. }

Here is my code and condition of my directive. I want to check if the email contains @ and .com keywords and if id doesn't I want to set invalidEmail as true
Main Component Code

register.component.html

  1. &lt;form #registerForm=&quot;ngForm&quot; class=&quot;form-container&quot; (ngSubmit)=&quot;postData(registerForm)&quot;&gt;
  2. &lt;mat-grid-list cols=&quot;1&quot; rowHeight=&quot;100vh&quot;&gt;
  3. &lt;mat-grid-tile&gt;
  4. &lt;div class=&quot;example-container&quot;&gt;
  5. &lt;mat-form-field hintLabel=&quot;Max 20 characters&quot; appearance=&quot;fill&quot; class=&quot;width-50&quot;&gt;
  6. &lt;mat-label&gt;First Name&lt;/mat-label&gt;
  7. &lt;input #fname minlength=&quot;3&quot; maxlength=&quot;20&quot; required [(ngModel)]=&quot;ad.firstName&quot; type=&quot;text&quot; name=&quot;firstName&quot;
  8. matInput placeholder=&quot;Enter Your Firstname&quot;&gt;
  9. &lt;mat-hint align=&quot;end&quot;&gt;{{fname.value.length}}/20&lt;/mat-hint&gt;
  10. &lt;/mat-form-field&gt;
  11. &lt;mat-form-field hintLabel=&quot;Max 20 characters&quot; appearance=&quot;fill&quot; class=&quot;width-50 ml-2&quot;&gt;
  12. &lt;mat-label&gt;Last name&lt;/mat-label&gt;
  13. &lt;input #lname minlength=&quot;3&quot; maxlength=&quot;20&quot; required [(ngModel)]=&quot;ad.lastName&quot; name=&quot;lastName&quot; type=&quot;text&quot;
  14. matInput placeholder=&quot;Enter your Lastname&quot;&gt;
  15. &lt;mat-hint align=&quot;end&quot;&gt;{{lname.value.length}}/20&lt;/mat-hint&gt;
  16. &lt;/mat-form-field&gt;
  17. &lt;br&gt;
  18. &lt;mat-form-field appearance=&quot;fill&quot; class=&quot;width-100&quot;&gt;
  19. &lt;mat-label&gt;City&lt;/mat-label&gt;
  20. &lt;input minlength=&quot;3&quot; maxlength=&quot;20&quot; required [(ngModel)]=&quot;ad.city&quot; name=&quot;city&quot; type=&quot;text&quot; matInput
  21. placeholder=&quot;Enter your City&quot;&gt;
  22. &lt;/mat-form-field&gt;
  23. &lt;br&gt;
  24. &lt;mat-form-field appearance=&quot;fill&quot; class=&quot;width-100&quot;&gt;
  25. &lt;mat-label&gt;Age&lt;/mat-label&gt;
  26. &lt;input min=&quot;1&quot; max=&quot;100&quot; required [(ngModel)]=&quot;ad.age&quot; name=&quot;age&quot; type=&quot;number&quot; matInput placeholder=&quot;Age&quot;&gt;
  27. &lt;/mat-form-field&gt;
  28. &lt;br&gt;
  29. &lt;mat-form-field appearance=&quot;fill&quot; class=&quot;width-100&quot;&gt;
  30. &lt;mat-label&gt;Username&lt;/mat-label&gt;
  31. &lt;input appEmailValidation #user=&quot;ngModel&quot; required [(ngModel)]=&quot;ad.username&quot; name=&quot;username&quot; matInput
  32. placeholder=&quot;Enter your username&quot;&gt;
  33. &lt;mat-hint color=&quot;warn&quot;&gt;&lt;/mat-hint&gt;
  34. &lt;/mat-form-field&gt;
  35. &lt;br&gt;
  36. &lt;mat-form-field appearance=&quot;fill&quot; class=&quot;width-100&quot;&gt;
  37. &lt;mat-label&gt;Enter password&lt;/mat-label&gt;
  38. &lt;input required [(ngModel)]=&quot;ad.password&quot; name=&quot;password&quot; matInput [type]=&quot; hide ? &#39;password&#39; : &#39;text&#39;&quot;&gt;
  39. &lt;button mat-icon-button matSuffix (click)=&quot; hide=!hide&quot; [attr.aria-label]=&quot;&#39;Hide password&#39;&quot;
  40. [attr.aria-pressed]=&quot;hide&quot;&gt;
  41. &lt;mat-icon&gt;{{hide ? &#39;visibility_off&#39; : &#39;visibility&#39;}}&lt;/mat-icon&gt;
  42. &lt;/button&gt;
  43. &lt;/mat-form-field&gt;
  44. &lt;button [disabled]=&quot;registerForm.invalid&quot; mat-raised-button color=&quot;primary&quot;&gt;Submit&lt;/button&gt;
  45. &lt;/div&gt;
  46. &lt;/mat-grid-tile&gt;
  47. &lt;/mat-grid-list&gt;
  48. &lt;/form&gt;
  49. {{user.errors | json}}

When I am running the code i am getting this error
Cannot read properties of null

答案1

得分: 1

请修改此条件：

  1. if (!value || (!value.includes('@') && !value.includes('.com'))) {
  2.   return {
  3.     invalidEmail: true,
  4.   };
  5. }

因为在您的情况下，value 是 null，我认为 null 也是电子邮件的无效值。

英文:

simply edit this condition:

  1. if (!value || ( !value.includes(&#39;@&#39;) &amp;&amp; !value.includes(&#39;.com&#39;))) {
  2. return {
  3. invalidEmail: true,
  4. };
  5. }

Because in your case value is null and I believe that null is also an invalid value for email.

huangapple
  • 本文由 发表于 2023年2月19日 15:57:56
  • 转载请务必保留本文链接：https://go.coder-hub.com/75498733.html
  • angular
  • angular-material
  • html
  • typescript
匿名

发表评论

匿名网友

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

确定