Результат валидатора FormControl в TypeError не может прочитать свойство undefined - PullRequest
Новая
       15

Результат валидатора FormControl в TypeError не может прочитать свойство undefined

0 голосов
/ 23 марта 2020

Моим пользователям разрешено вводить только указанные c значения для ввода текстового типа.

Вот app.component.ts: 

export class AppComponent implements OnInit {
  myForm: FormGroup;
  allowedValuesArray = ['Foo', 'Boo'];

  ngOnInit() {
    this.myForm = new FormGroup({
      'foo': new FormControl(null, [this.allowedValues])
    });        
  }

  allowedValues(control: FormControl): {[s: string]: boolean} {
    if (!this.allowedValuesArray.indexOf(control.value)) {
      return {'notValidFoo': true};
    }        
    return {'notValidFoo': false};
  }
}

app.component . html: 

<form [formGroup]="myForm">
  Foo: <input type="text" formControlName="foo">
  <span *ngIf="!myForm.get('foo').valid">Not valid foo</span>
</form>

При загрузке страницы выдается это исключение:

TypeError: Невозможно прочитать свойство 'allowValuesArray' undefined в pu sh .. / src /app/app.component.ts.AppComponent.allowedValues ​​(app.component.ts: 20) в формах. js: 1170 в Array.map () в _executeValidators (форм. js: 1170) в FormControl.validator (формы. js: 1132) в FormControl.pu sh .. / node_modules/@angular/forms/fesm5/forms.js.AbstractControl._runValidator (формы. js: 2931) в FormControl.pu sh .. / node_modules/@angular/forms/fesm5/forms.js.AbstractControl.updateValueAndValidity (формы. js: 2907) в новом FormControl (формы. js: 3267) в AppComponent.pu sh .. / src / app / app.component.ts.AppComponent.ngOnInit (app.component.ts: 15) в checkAndUpdateDirectiveInline (core. js: 21097)

Ответы [ 2 ]

1 голос
/ 23 марта 2020

Как сказал КамЛар, это происходит из этой строки: 

if (!this.allowedValuesArray.indexOf(control.value)) {
  return {'nameIsForbidden': true};
}

вы можете справиться с этим с помощью 

'foo': new FormControl(null, [this.allowedValues.bind(this)])
1 голос
/ 23 марта 2020

Из этой строки и как работает ключевое слово this: 

if (!this.allowedValuesArray.indexOf(control.value)) {
  return {'nameIsForbidden': true};
}

Вы не выполняете метод (или функцию) самостоятельно, вы просто позволяете Angular выполнить его и проверить поле. Поскольку вы позволяете сделать это для Angular, this больше не ссылается на AppComponent. Что вам нужно сделать, это .bind AppComponent, чтобы функционировать, или, я полагаю, заменить его на функции в виде стрелок, подобные этой: 

fun = (formControl: FormControl) => null
...