Question

我有一个包含3个表单组的表单组。这些表单组中的每一个都有formControls输入。当我在一个输入中键入不符合验证条件的内容，然后转到另一个输入时，它起作用了，该消息会正确显示。但是，当我单击提交按钮时，它不起作用。然后主表单组无效，但仍不显示任何消息。有人有主意吗？

主表单组

    <form (ngSubmit)="saveBaseInfos()"
          [formGroup]="baseInfosForm">
    ***//first child formgroup***
      <address [title]="'base-infos.address-to-be-insured.title' | translate"
                    name="addressToBeInsured"
                    [group]="baseInfosForm.controls['insuredAddress']">
      </address>
    ***//second child formgroup***
      <about-you [group]="baseInfosForm.controls['aboutYou']">
      </about-you>
    ***//third child formgroup***
      <address *ngIf="boolDisplayForm==false"
                    [title]="'base-infos.current-address.title' | translate"
                    name="currentAddress"
                    [group]="baseInfosForm.controls['currentAddress']">
      </address>

      <button type="submit"
              class="bigBtn"
              [innerHTML]="'base-infos.buttons.submit' | translate">
      </button>
    </form>

                    **********

主要表格ts文件

  this.baseInfosForm = this._fb.group({
      aboutYou: this._fb.group({}),
      insuredAddress: this._fb.group({}),
      currentAddress: this._fb.group({})
    });
    ***/* the submit function */***
    if (this.baseInfosForm.valid) {
        this._router.navigate(['');
   }

地址组件ts文件

   this.addressForm
          .addControl('postalCode',
            new FormControl('',
              { updateOn: 'blur',
                validators: validations.PostalCodeValidation
              }));
     this.addressForm
            .addControl('sameAddress',
            new FormControl('',
              { updateOn: 'blur',
                validators: validations.SameAddressValidation
              }));

          **********

地址部分的html

     <div class="divSection">
      <form id="addressFormId"
            [formGroup]="addressForm">
        <h2 [innerHTML]="title"></h2>

        <div class="form-group">
          <label for="{{name}}-postalCode"
                 [innerHTML]="'address.fields.postal-code.label' | translate"></label>
          <input id="{{name}}-postalCode"
                 formControlName="postalCode"
                 type="text"
                 [placeholder]="'address.fields.postal-code.placeholder' | translate"
                 [textMask]="{mask: maskPattern.postalCodeMask}"
                 [value]="states['postalCode']"/>
          <sosi-error-message [messages]="validationErrorMessages.postalCode"></sosi-error-message>
        </div>

      <radios 
             required
             [parentFormGroup]="addressForm">
      </radios>
     ...

和无线电组件ts文件

@Component({
  selector: 'radios',
  templateUrl: './radios.component.html',
  styleUrls: ['./radios.component.scss']
})
export class RadiosComponent  implements OnInit {
@Input() parentFormGroup: FormGroup;

无线电HTML表单控件

<div  [formGroup]="parentFormGroup"
     [id]="name"
     [ngClass]="getFlexClass()">
  <div class="mega-radio-container"
       *ngFor="let curItem of items; let i = index; let last = last"
       [style.width]="getWidthOfOne(i)"
       [style.flex-grow]="getFlexGrow()">
    <input required [formControlName]="sameAddress"
           type="radio"
           [disabled]="disabled"
           [value]="curItem.value"
           [checked]="value!=null && curItem.key == value"
           (click)="onClickItem(curItem.key)"/>
    <label class="mega-radio"
           for="{{name}}-{{i}}"
           tabindex="1">
      {{ (curItem.value | translate) == null ? curItem.value : (curItem.value | translate) }}
    </label>
  </div>
</div>

/ *在此html中，我传递了一个列表以将其显示为单选按钮* /

我认为验证消息的问题是由于无线电子组件本身是一个formcontrol，并且未绑定到其父formgroup ...这一事实很可能是因为控制台内部是这样的： RadiosComponent.html：8错误错误：找不到具有未指定名称属性的控件

致谢优素福

验证消息显示为“模糊”，而不显示为提交

0 个答案: