Как получить реактивную проверку с группой массивов? - PullRequest
Новая
       7

Как получить реактивную проверку с группой массивов?

0 голосов
/ 08 января 2019

Я установил код таким образом 

errorGroup: any = FormGroup;

this.errorGroup = this.formBuilder.group({
    errors: this.formBuilder.array([])
});

Для повторения / добавления новых данных в группу я добавил эту функцию, которая прекрасно работает. 

addErrorGroup() {
    return this.formBuilder.group({
        error_code: ['',[Validators.required ]]            
    })
}

Получить контроль таким образом. Я думаю, я слышал, что что-то упустил. 

get f() { return this.errorGroup.controls.errors; }

В HTML 

<select formControlName="error_code" name="error_code" (change)="errorCodeChange($event.target.value , i)">
    <option *ngFor="..." value={{...}}>{{...}}</option>
</select>
<span *ngIf="f.error_code.errors.required" class="error-msg">This is required field.</span>

Я получил эту ошибку. 

ERROR TypeError: Cannot read property 'errors' of undefined

Ответы [ 2 ]

0 голосов
/ 08 января 2019

Как насчет, если вы просто делаете ниже? 

<span *ngIf="errorGroup.get('error_code').errors.required" class="error-msg">
  This is required field.
</span>

таким образом, вам не нужен метод получения f () в файле компонента.

0 голосов
/ 08 января 2019

Если эта ошибка исходит от HTML, это потому, что ваше условие *ngIf пытается прочитать значение из неопределенного объекта.

В тот момент, когда представление визуализируется и проверяется, вполне возможно, что f (кстати, вам следует изменить это имя переменной на более описательное, но ??‍♂️), пока не было заполнено ни одной ошибки , поэтому будет неопределенным.

Вы можете сделать одну из двух вещей здесь, либо вы можете обернуть все это в другую *ngIf, чтобы гарантировать, что error_code часть f заполнена перед доступом к ней: 

<span *ngIf="f && f.error_code">
    <span *ngIf="f.error_code.errors.required" class="error-msg">This is required field.</span>
</span>

Или вы можете воспользоваться оператором безопасной навигации: 

<span *ngIf="f?.error_code?.errors?.required" class="error-msg">This is required field.</span>

Обратите внимание на ? после каждого ключа объекта. Это выручает, когда оно достигает первого нулевого значения, но приложение продолжает работать, поскольку оно терпит неудачу изящно.

Подробнее об этом можно прочитать здесь: https://angular.io/guide/template-syntax#the-safe-navigation-operator----and-null-property-paths

...