我有一个包含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
尊重你