Поле формы HTML не отображает состояние касания - Angular 7 - PullRequest
Новая
       24

Поле формы HTML не отображает состояние касания - Angular 7

0 голосов
/ 07 мая 2019

Я пытаюсь ввести некоторые данные в форме, но это не дает мне статус touched. Поэтому при отправке сообщения обратно пользователю всегда будет возникать ошибка.

Я использую FormBuilder в моем файле TS для хранения значений из HTML. Это дает мне эту ошибку независимо от того, введу я данные или нет.

Я потерян.

Ошибка 

firstName: FormControl {validator: ƒ, asyncValidator: ƒ, _onCollectionChange: 
ƒ, pristine: true, touched: false, …}

Значение: 

value: {firstName: "", .... }

Я пытался проверить pristine в условии ngIf, но это не так.

Вот мой HTML-код: 

<form [formGroup]="formInfo" (ngSubmit)="validateForm()">

  <label>First Name <input type="text" maxlength="35" />
<div *ngIf="submitted && formInfo.controls.firstName.errors" class="error">

  <div *ngIf="(formInfo.controls.firstName.pristine) && (formInfo.controls.firstName.errors.required)">Your first
    name is required.</div>
</div>
</label>
....
 </form>

А вот мой код TypeScript: 

 // Class Attributes
 formInfo: FormGroup;
 submitted = false;
 success = false;

 constructor(private builder: FormBuilder) { }

 // Form data as an object
 ngOnInit() {
    this.formInfo = this.builder.group({
     firstName: ['', Validators.required],
     ....
     });
 }

 // Validates the form
 validateForm() {
    this.submitted = true;

    console.log(this);
    console.log(this.formInfo);

   if (this.formInfo.invalid) {
      return;
   }

    this.success = true;
  }
}

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

Я добавил следующий код, чтобы посмотреть, есть ли четное значение в моем файле TS. 

 <form [formGroup]="formInfo" (ngSubmit)="validateForm()">

  <label>First Name <input type="text" maxlength="35" />
<div *ngIf="submitted && formInfo.controls.firstName.errors" class="error">

  <div *ngIf="(formInfo.controls.firstName.pristine) && (formInfo.controls.firstName.errors.required)">Your first
    name is required.</div>
</div>
</label>
....
 </form>

<!-- I added this -->
<div *ngIf="submitted">
    <strong>First Name</strong>
    <span>{{ formInfo.controls.firstName.value }}</span>
 </div>

Кажется, что значение никогда не сохраняется в TS.

Ответы [ 2 ]

1 голос
/ 07 мая 2019

formInfo.controls.firstName.pristine будет true, если пользователь еще не изменил значение в пользовательском интерфейсе. https://angular.io/api/forms/AbstractControl#pristine

Вы хотите изменить 

<div *ngIf="(formInfo.controls.firstName.pristine) && (formInfo.controls.firstName.errors.required)">Your first
    name is required.</div>

будет 

<div *ngIf="formInfo.controls.firstName.invalid && formInfo.controls.firstName.errors.required">Your first
    name is required.</div>
0 голосов
/ 07 мая 2019

Чтобы решить мой вопрос, вам просто нужно изменить 

<form [formGroup]="formInfo" (ngSubmit)="validateForm()">

<label>First Name <input type="text" maxlength="35" />
<div *ngIf="submitted && formInfo.controls.firstName.errors" class="error">

<div *ngIf="(formInfo.controls.firstName.pristine) && 
(formInfo.controls.firstName.errors.required)">Your first
name is required.</div>
</div>
</label>
....
</form>

К 

<form [formGroup]="formInfo" (ngSubmit)="validateForm()">

<label>First Name <input type="text" maxlength="35" formControlName="firstName">
<div *ngIf="submitted && formInfo.controls.firstName.errors" class="error">

<div *ngIf="(formInfo.controls.firstName.pristine) && 
(formInfo.controls.firstName.errors.required)">Your first
name is required.</div>
</div>
</label>
....
</form>

Приносим извинения за неудобства ...

...