Как выполнить проверку поля в машинописном тексте Angular, а не в форме? - PullRequest
0 голосов
/ 09 июля 2019

Из-за особых требований мне нужно проверить наличие моего поля delivery.address в коде машинописного текста, поэтому я вызываю функцию addressIsValid (), чтобы сделать это, как показано в приведенном ниже коде.

<div class="col col-md-6 col-lg-12">
<input class="form-control" type="text" name="address" id="address" 
    [(ngModel)]="delivery.address" #address="ngModel">
    <ng-container *ngIf="delivery.method=='Delivery'">
        <div *ngIf="!addressIsValid()" class="primary-color">
            <!-- <div *ngIf="address.invalid && (address.dirty 
                || address.touched)" class="primary-color"> -->
            Address is required
            <!-- </div> -->
        </div>
    </ng-container>
</div>

Функция машинописи:

public addressIsValid() {
    return !this.delivery.address == undefined 
        && !this.delivery.address == null;
  }

Проблема в том, что после ввода допустимого значения в поле появляется сообщение об ошибке: «Требуется адрес». не уходит. Как мне это исправить?

Ответы [ 3 ]

1 голос
/ 09 июля 2019

Я думаю, что проблема в вашей addressIsValid функции.

Возьмем, к примеру, 2 объекта:

const o = { name: 'john' };
const o2 = { name: undefined };

!o.name -> false;
!o2.name -> true;

Ничто из вышеперечисленного не удовлетворяет условию == undefined или == null.

Таким образом, вы всегда получите ложное значение.

Вы можете изменить свою функцию следующим образом:

public addressIsValid() {
    return this.delivery.address !== undefined 
        && this.delivery.address !== null;
  }
0 голосов
/ 09 июля 2019

Я бы предложил прочитать о Угловые реактивные формы .Вы можете легко определить правила проверки в TypeScript и управлять отображением сообщений об ошибках в своем представлении.

  this.heroForm = new FormGroup({
    'name': new FormControl(this.hero.name, [
      Validators.required,
      Validators.minLength(4),
      forbiddenNameValidator(/bob/i) // <-- Here's how you pass in the custom validator.
    ]),
    'alterEgo': new FormControl(this.hero.alterEgo),
    'power': new FormControl(this.hero.power, Validators.required)
  });
  <div *ngIf="name.errors.required">
    Name is required.
  </div>
  <div *ngIf="name.errors.minlength">
    Name must be at least 4 characters long.
  </div>
  <div *ngIf="name.errors.forbiddenName">
    Name cannot be Bob.
  </div>

Также взгляните на сервис FormBuilder , который будетпомогите сжать форму, создав синтаксис.

0 голосов
/ 09 июля 2019

Вы, вероятно, хотели проверить это:

public addressIsValid() {
    return !!this.delivery.address;
  }

пример

Если это не так, вам нужно отладить то, что фактически содержит this.delivery после вызова вашего метода.

console.log(this.delivery)

И скажите нам, что это содержит.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...