我有一个包含3个表单组的表单组 . 这些表单组中的每一个都具有formControls输入 . 当我在一个不符合验证的输入中键入内容,然后转到另一个输入时,它可以正常显示消息 . 但是,当我点击提交按钮时,它不起作用 . 然后主表单组无效,但仍然不显示任何消息 . 有人有想法吗?

main formgroup


<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>

                    **********

main form ts file

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(['');
   }

adress component ts file

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

          **********

html of the address component

<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>
     ...

and radio component ts file

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

radio html formcontrol

<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>

/ in this html i pass a list to display them as radio buttons /

我认为验证消息的问题来自于这样一个事实,即无线电子组件本身就是一个表单控件,而且没有绑定到它的父表单组......就像那样可能,因为这是我在控制台内部的内容: RadiosComponent.html:8 ERROR Error: Cannot find control with unspecified name attribute

尊重你