"formGroup" 表单未提交且验证无效

Question

我的 Angular 组件中有一个 [formGroup] 表单，它使用 ControlMessages 在提交表单之前显示错误。但是我的 "required" 验证错误都没有出现，我的输入也没有从禁用状态改变状态。我希望在将字段留空时显示所需的错误。

COMPONENT.HTML

                     <form [formGroup]="ipForm" (submit)="ipSubmit()">
                                <div class="row">
                                        <div class="col-8">
                                                <input id="batchno" type="text"  name="batchno" placeholder="Batch No. *" value="" />
                                                <app-control-messages [control]="ipForm.get('batchno')"></app-control-messages>
                                        </div>
                                        <div class="col-4">
                                                <button (click)="curScan('batch','tip')" class="scan-btn">SCAN <i class="fa fa-camera"></i></button>
                                        </div>
                                </div>
                                <div class="row">
                                        <div class="col-12">
                                        <label class="checklabel">Direct Issue to Production
                                                <input type="checkbox">
                                                <span class="checkmark"></span>
                                        </label>
                                        </div>
                                </div>
                                <div class="row">
                                        <div class="col-12">
                                                <input type="text" id="header" name="header" placeholder="Header *" required>
                                                <app-control-messages [control]="ipForm.get('header')"></app-control-messages>
                                        </div>
                                </div>
                                <div class="row">
                                        <div class="col-12">
                                            <select name="fstorageloc" id="fstorageloc">
                                                <option selected disabled hidden>From Storage Location *</option>
                                                <option>Delhi</option>
                                            </select>
                                            <app-control-messages [control]="ipForm.get('fstorageloc')"></app-control-messages>
                                        </div>
                                </div>
                                <div class="row" style="margin-top: 3px;">
                                        <div class="col-12">
                                            <select name="tstorageloc" id="tstorageloc">
                                                <option selected disabled hidden>To Storage Location *</option>
                                                <option>Gurgaon</option>
                                            </select>
                                            <app-control-messages [control]="ipForm.get('tstorageloc')"></app-control-messages>
                                        </div>
                                </div>
                                <div class="row" style="margin-top: 3px;">
                                        <div class="col-12">
                                        <select name="dtype" id="dtype">
                                                <option selected disabled hidden>Select Damage Type *</option>
                                                <option>Tear</option>
                                        </select>
                                        <app-control-messages [control]="ipForm.get('dtype')"></app-control-messages>
                                        </div>
                                </div>
                                <div class="row" style="margin-top: 3px;">
                                        <div class="col-12">
                                        <select name="dod" id="dod">
                                                <option selected disabled hidden>Select Depth of Damage *</option>
                                                <option>100</option>
                                        </select>
                                        <app-control-messages [control]="ipForm.get('dod')"></app-control-messages>
                                        </div>
                                </div>
                                <div class="row">
                                        <div class="col-6">
                                                <button type="button" class="reset-btn" (click)="ipForm.reset()">Reset</button>
                                        </div>
                                        <div class="col-6">
                                                <input type="submit" value="Submit" [disabled]="!ipForm.valid">
                                        </div>    
                                </div> 
                        </form>

COMPONENT.TS

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ValidationService } from './../services/validation.service';

@Component({
  selector: 'app-transfer',
  templateUrl: './transfer.component.html',
  styleUrls: ['./transfer.component.css']
})
export class TransferComponent implements OnInit {
  ipForm: any;
  constructor(private router: Router, private formBuilder: FormBuilder) { 
    this.ipForm = this.formBuilder.group({
      batchno: ['', Validators.required],
      header: ['', Validators.required],
      fstorageloc: ['', Validators.required],
      tstorageloc: ['', Validators.required],
      dtype: ['', Validators.required],
      dod: ['', Validators.required]
    });

    console.log(this.ipForm);
  }
  ipSubmit() {
    if (this.ipForm.dirty && this.ipForm.valid) {
      alert(`Batch No: ${this.ipForm.value.batchno} Header: ${this.ipForm.value.header}`);
    }
  }
}

控制消息。COMPONENT.TS

import { Component, Input } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { ValidationService } from './../services/validation.service';

@Component({
  selector: 'app-control-messages',
  template: `<div *ngIf="errorMessage !== null">{{errorMessage}}</div>`
})
export class ControlMessagesComponent {

  @Input() control: FormControl;
  constructor() { }

  get errorMessage() {
    for (let propertyName in this.control.errors) {
      if (this.control.errors.hasOwnProperty(propertyName) && this.control.touched) {
        return ValidationService.getValidatorErrorMessage(propertyName, this.control.errors[propertyName]);
      }
    }

    return null;
  }

}

Answer 1

对于所有需要的其余表单字段，使用 formControlName 而不是下面的名称。

<input type="text" id="header" formControlName="header" placeholder="Header *" required>

"formGroup" 表单未提交且验证无效

"formGroup" form not submitting and validations not working

angular

angular-formbuilder