Vscode-ng-language-service: Поддержка необязательного связывания в шаблоне

У меня такая же проблема, но ни одно из предложенных решений не помогло:
"форма? .get ('имя'). errors.required"
"form? .get ('name'). errors. ['required']"
"форма? .get ('name'). errors? .required"

Привет, попробуй вот так.
Form.hasError ('обязательно');

Это сработало для меня. Спасибо @antonheck

Есть несколько обходных путей, каждый из которых лучше подходит для разных ситуаций, да. Но проблема не в этом. Мне не следовало писать свой код по-другому, включая уродливый, хакерский синтаксис, только чтобы успокоить расширение IDE, когда то, что я написал, было правильным с самого начала.

У меня точно такая же проблема и сообщение с этим похожим кодом:

class MyComponent {
  form: FormGroup;
}

с такими строками в шаблоне:

<app-errors [control]="form.controls.email">

Сообщение об ошибке :

Идентификатор электронной почты не определен. '__type' не содержит такого члена

Проблема вызвана полями типа (это происходит с AbstractControl или чем-то еще, конечно):

{  [key: string]: AbstractControl;  };

У меня есть это сообщение в Visual Studio Code (Windows) и Angular Language Services, но не в ng lint .

Лучшее решение на данный момент:

Попробуйте добавить "!!".
Хотя это сложно,
Так мне удалось.

_from: https://github.com/angular/vscode-ng-language-service/issues/126#issuecomment -366200219_

Спасибо tmrony, лучшее решение после многих дней поиска ...

На самом деле это должно быть так, отображается выделение ошибки, потому что свойство «errors» объекта «AbstractControl» не имеет строго определенных свойств, это тип « ValidationErrors »

Таким образом, прямой доступ к правилу проверки вызывает ошибку, в моем случае доступ к нему с использованием обозначения квадратных скобок решает проблему.

(кстати, даже если я обращаюсь к свойству проверки напрямую, я не получаю ошибок компиляции, приложение в любом случае работает нормально)

Другой способ сделать это - использовать метод hasError элемента управления:

   <span *ngIf="(firstName.dirty || firstName.touched) && firstName.hasError('required')">First name is required.</span>

@ boban984 Решение сработало ....

@adickenscheidt У меня

"price.errors ['required']" -> Сработало
"!! price.errors.required" -> Сработало

"price? .errors? .required" также должно работать, потому что мое "fullname? .errors? .required" работает

"price.errors ['required']" -> Сработало

Это не запускает компилятор «идентификатор не определен», но это не лучшее решение, потому что, если объект ошибок имеет значение NULL, на консоли будет отображаться ошибка.

@ boban984
это лучшее решение и объяснение.

Я был рад найти здесь обсуждаемый метод hasError() , это, безусловно, самый ясный способ показать намерение условного шаблона, и я думаю, что постараюсь использовать его исключительно в будущем.

Однако ... никто не устраняет основную причину проблемы, и это проблема языковой службы уже около года. Свойство errors имеет подпись индекса ключа ( [key: string]: any ), что означает, что в коде TS оператор myControl.errors.anythingYouLike будет компилироваться чисто, независимо от того, какие флаги строгого режима вы установили. . Это правильно, потому что вся суть такой подписи индекса заключается в том, чтобы иметь возможность создавать произвольные свойства во время выполнения и получать к ним доступ либо через точечную, либо через индексную нотацию. Языковая служба позволяет использовать индексную нотацию, поэтому control?.errors['required'] работает, но помечает точечную нотацию как неправильную, что является ошибкой.

три решения:

<span *ngIf=" username.errors['email']">must be email</span>

<span *ngIf="!!username?.errors.email">must be email</span>

<span *ngIf="username.hasError('email')">must be email</span>

Мне нравится третий лучший

@ boban984 Отличное решение и объяснение

спасибо, у меня работает !. 👍🏼
ненавижу просматривать ошибки на консоли 😬

Привет, попробуй вот так.
Form.hasError ('обязательно');

Это было наиболее элегантное решение, которое действительно работает во всех случаях: myForm.hasError ('required', 'myField').

Спасибо @antonheck

Привет, попробуй вот так.
Form.hasError ('обязательно');

Это было наиболее элегантное решение, которое действительно работает во всех случаях: myForm.hasError ('required', 'myField').

Это работает, но лучшее решение, основанное на простоте, было предложено @ boban984 : "myField.hasError ('required')". :)

Я решил эту проблему так:

• example.component.ts:

this.myForm = this.formBuilder.group({
      field: ['', [Validators.required, Validators.maxLength(10)]]
});

get getField() { return this.myForm.get('field'); }

• example.component.html:

<div *ngIf="getField.errors" class="invalid-feedback">
  <div *ngIf="getField.hasError('required')"> Text required </div>
  <div *ngIf="getField.hasError('maxlength')"> Text maxLength </div>
</div>

Я надеюсь быть полезным.

Прекрасно @bePericon, это работает для меня!
Спасибо!

<input type="text" formControlName="name" class="form-control" placeholder="Full name"> <div *ngIf="submitted && f['name'].errors" class="alert alert-danger"> <div *ngIf="f['name'].errors.required">Full Name is required</div> </div>
Это сработало для меня в Angular 7

Значит, через два года это так и не было исправлено? 🤣
связанные: https://github.com/angular/vscode-ng-language-service/issues/110

Значит, через два года это так и не было исправлено? 🤣
связанные: # 110

Это не ошибка, это именно так и должно работать

Если это ожидаемая функциональность, можно ли обновить документацию? (см. здесь один пример).

Это явно означает, что можно использовать необработанные аксессоры свойств ngModel , а там, где этот поток установил, они определенно не могут.

На самом деле это исправлено? Я переключился на hasError много лет назад, но теперь я не могу воспроизвести ошибку. myControl.errors.maxlength у меня не вызывает красных волнистых линий. Это с расширением языковой службы 0.801.1, которое использует версию 8.1.x библиотеки, если это помогает.

@ thw0rted, поэтому при повторном тестировании с myControl.errors.required и .pattern и (понял, что я пропустил атрибут required во входном теге, что приводило к большему сбою), они не вполне работает.

Required основном работает, хотя были некоторые странные ошибки, которые выскакивали (пропустил их захват, и они, к сожалению, несовместимы), а pattern срабатывает, когда шаблон неправильный, но, похоже, не обновляется когда узор правильный.

Кроме того, у меня такое же расширение языка vsCode, и я все еще странно вижу волнистые линии.

Собираюсь придерживаться решения .hasError на данный момент и, вероятно, по-прежнему рекомендую обновлять документы, по крайней мере, для более четкого / передового использования.

Я обнаружил, что эта ошибка появляется каждый раз, когда вы ссылаетесь на свойство, которое определено как «любое». Другой обходной путь - использование аннотации свойства скобки clientFirstName? .Errors ['required'], что тоже довольно глупо.

Это устранило ошибки для меня. Для справки, код работал даже тогда, когда ошибки были обозначены, мне просто не нравится видеть красные линии в моем коде.

Да, ввод ключа в виде строки удаляет красные линии.

Но при этом вы теряете такие функции, как правильное написание и автозаполнение.

Помимо использования hasError (), для доступа к дочернему элементу управления формы следует использовать get (), а не точечный доступ. например

class MyComponent {
  form: FormGroup;
}

с такими строками в шаблоне:

<app-errors [control]="form.controls.email">

Сообщение об ошибке :

Идентификатор электронной почты не определен. '__type' не содержит такого члена

решение было бы:

<app-errors [control]="form.get('email')">

Та же проблема.

f.email.errors.email.required Сбой
!! f.email.errors.email.required Не работает
f.email?.errors.email.required Сбой
f? .email? .errors.email.required Не работает
f.email.error. ['required'] Не работает
f.email?.error.[required '] Не работает

Это сработало для меня:

f ['электронная почта']. errors.required

Должно быть исправлено с помощью https://github.com/angular/angular/pull/33884.

Эта проблема была автоматически заблокирована из-за бездействия.
Сообщите о новой проблеме, если вы столкнулись с аналогичной или связанной проблемой.

Узнайте больше о нашей политике автоматической блокировки разговоров .

_{_Это действие было выполнено автоматически ботом. _}