Angular 4 - Cannot Read Property Status of Null While Displaying Validation Error

Angular 4 - cannot read property status of null while displaying validation error

there is issue with the way you are trying to get element , with below line

userGroup.get('contacts.controls[i].controls.contact_name').touched

this will not get interpreted with control it get interpreted as string.

---

you need to access element like this, so your code should be like

   userGroup.controls.contacts.controls[i].controls.contact_name.status

So as per code you first need to access from(userGroup) then go to the controls and cotacts fromarray, and as fromarray is set of element access it by index i and then refer individual element in that array contact_name

Ans based on Reading of this article
: Reactive Forms in Angular: Dynamically Creating Form Fields With FormArray

Angular: Cannot read properties of null (reading 'cannotContainSpace')

AbstractControl.errors possibly returns null. Hence you need to use Optional chaining (?.) for username.errors to prevent accessing chaining properties when it is null or undefined.

The ?. operator is like the . chaining operator, except that instead
of causing an error if a reference is nullish (null or undefined), the
expression short-circuits with a return value of undefined. When used
with function calls, it returns undefined if the given function does
not exist.

<div
  *ngIf="username.errors?.cannotContainSpace && username.touched"
  class="alert alert-danger"
>
  Username cannot contain space.
</div>
<div
  *ngIf="username.errors?.required && username.touched"
  class="alert alert-danger"
>
  Username is required.
</div>
<div
  *ngIf="username.errors?.shouldBeUnique && username.touched"
  class="alert alert-danger"
>
  Username is already taken.
</div>

Sample Solution on StackBlitz

TypeError: Cannot read property 'message' of null angular 8 http post

I suppose you are using different project in for angular and web api so as i see that you have used.

[AllowAnonymous]
[HttpPost("ValidateOTP")]
internal IActionResult ValidOTP(string OTP, string UserName, string type)

Please change internal into public as error shown above by you is 404 message for zone.js.

Angular 6 Forms TypeError: Cannot read property 'valid' of null

The second time around, your input is null, because of a typo in your errors.

private setupMessages(): void {
    this.messages = {
        name: {
            required: 'Please give your product an awesome name',
            minlength: 'The name should be longer than 3 characters',
            maxlength: 'Keep your product name under 100 characters',
        },
        description: {
            maxlength: 'Your description is to long',
        },
    }
    this.errors = {
        name: '',
        descripton: '',
    }
}

Note, in this.errors, you have an error key called descripton, but your formgroup key is description (spelled correctly).

You're missing an i in the this.errors version.

Also, in addition to my comment above, maybe worth editing your condition to be if (input && !input.valid) to keep it safe :)

Angular 2 - Custom Form Validator not working - Cannot read property 'value' of null

Angular reactive forms call the validators immediately and often. The cross-field validator on your form group will begin to validate as each child control is instantiated by the framework.

To prevent it from throwing premature validation errors, you'll probably want to ensure that the control in question has been instantiated, like so:

checkUsername(g: FormGroup) {
    if (!g || !g.get('username')) {
        return null;
    }
    return this.dataService.checkUsername(g.get('username').value).subscribe(data => {
        return typeof data["error"] != 'undefined' ? null : {'taken': true};
    });
}

Your 2nd attempt seems like a better direction to go, however, because it's an asynchronous validator for the 'username' control, but you have a typo in the asyncValidators property (missing the 's'). You also likely don't need to .bind(this) if you're not referencing "this" in the function.

username: new FormControl('', {
  validators: [Validators.required, Validators.minLength(4)],
  asyncValidators: [this.checkUsername]
})

Then your validator is just handling a single form control instead of the whole group, something like this:

checkUsername(c: FormControl) {
    if (!c) { return null; }
    return this.dataService.checkUsername(c.value).subscribe(data => {
        return typeof data["error"] != 'undefined' ? null : {'taken': true};
    });
}

Angular 9 - ERROR TypeError: Cannot read property 'name' of undefined

The temp1 variable may not be defined when you try to access it in the template. You could use the safe navigation operator ?. to workaround the error.

<mat-form-field *ngIf="temp1[i]?.name" appearance="outline"  style="width: 95%;">

It checks if temp1[i] is defined before trying to access it's properties.

Angular - ERROR TypeError: Cannot read properties of undefined (reading 'licence_number')

let employee: IEmployee = {
    ...response.results.employee,
    licence_number:
                 (response.results.employee.licences &&
                  response.results.employee.licences[0] &&
                  response.results.employee.licences[0].licence_number ) 
                  ? response.results.employee.licences[0].licence_number : '';

Try to check better if the field is there and if not then provide an empty string ''

Here is a simple example why your checks are not enough.

const c = {d: []}
console.log(c.d);   // -> prints []
console.log(c.d[0]); // -> prints undefined

You can also understand that is important to always patch the value with something. So if in the end the value you try to patch is undefined, it will fail. In that case you must first check and if undefined then patch it with an empty string ''.

TypeError: Cannot read property 'valid' of undefined

In your case content is a property on your model.

In order to do what you want you need to use a template reference value for the form control #myControl="ngModel" and then you have access to the valid property: myControl.valid.

So in your example:

<textarea class="form-control" [(ngModel)]="content"
          name="content" required #myControl="ngModel">
</textarea>

And use it in the button tag:

<button type="submit" class="btn btn-default" 
[disabled]="myControl.valid">New comment</button>

ERROR TypeError: Cannot read properties of undefined (reading 'title')

The serive.book property is undefined because it doesn't have an initial value. So in your service, just initialize the book property like the following:

book: Book = new Book();

---

Related Topics