Почему ошибка проверки не отображается в представлении

Question

Просто тренируюсь, у меня есть эта форма: она выдает консольное сообщение, так что, по крайней мере, проводка правильная, но не выдает ошибку проверки, когда я ничего не набираю в учебнике и не нажимаю "Отправить".

  <form [formGroup]="myForm"
        (ngSubmit)="onSubmit(myForm.value)">
    <div>
      <label for="skuInput">SKU</label>
      <input id="skuInput" type="text" [formControl]="myForm.controls['sku']"   placeholder="sku">
    </div>
    <button type="submit">Submit</button>
  </form>

и этот компонент для него:

export class DemoFormSkyWithBuilderComponent implements OnInit {
  myForm: FormGroup;
  sku: AbstractControl;

  constructor(fb: FormBuilder) {
    this.myForm = fb.group({
      sku: ['', Validators.required]
    });

    this.sku = this.myForm.controls.sku;
  }
  onSubmit(value: string): void {
      console.log('you submitted this vallue: ' , value);
    }

Answer 1

В последних Angular версиях используется formControlName вместо formGroup.

 <form [formGroup]="myForm"
        (ngSubmit)="onSubmit(myForm.value)">
    <div>
      <label for="skuInput">SKU</label>
      <input id="skuInput" type="text" formControlName="sku" placeholder="sku">
    </div>
    <p *ngIf="myForm.controls['sku'].errors.required">Field is required<p>
    <button type="submit">Submit</button>
  </form>

В вашем компоненте, чтобы проверить, прошла ли проверка, используйте свойство status. Это свойство позволяет получить доступ к текущему состоянию экземпляра группы форм.

Если он возвращает VALID, то проверки пройдены, иначе он вернет INVALID.

export class DemoFormSkyWithBuilderComponent implements OnInit {
  myForm: FormGroup;
  sku: AbstractControl;

  constructor(fb: FormBuilder) {
    this.myForm = fb.group({
      sku: ['', Validators.required]
    });
  }
  onSubmit(value: string): void {
      console.log('Status: ' , this.myForm.status);
  }

Более того, если вы получите sh для доступа к значению поля, просто используйте:

this.myform.get('sku').value; //====> Enter field name, in this case sku

Аналогично, чтобы динамически установить значение поля, вы можете сделать это:

this.myform.get('sku').setValue('Sku2'); 

Теперь это должно работать. Чтобы узнать больше о проверке формы, посетите официальный веб-сайт Angular здесь .