Suppose I need to use an External (I can't change it, or use other) ChildComponent in my Angular Project that will be used in other ParentComponent.
The ChildComponent doesn't implements ControlValueAccessor and Validator interfaces.
But I need to use Validation, but I can't relate it to a native FormControl from FormBuilder like:
this.formBuilder.group({
childComp: ['', [Validators.required, Validators.minLength(1)]],
}
In my HTML it should be something like:
<my-child-component
matInput
formControlName="childComp"
[required]="formGroup.controls.childComp.invalid"
#idChild
>
</my-child-component>
But, I can't use formControlName="childComp" and [required]="formGroup.controls.childComp.invalid" as before.
For this reason, in my HTML Template, I can use only:
<my-child-component
#idChild
>
</my-child-component>
<mat-error *ngIf="childFieldErrorValidation">
The Custom Error Message
</mat-error>
<mat-hint>Custom Hint Message</mat-hint>
How to add behavior of Validators to External ChildComponent that are added to controls in a form?
If I have a Submit Button as:
<button
mat-raised-button
(click)="onSave()"
color="primary"
[disabled]="formGroup.invalid"
>
Save
</button>
Is it possible to disable the button due to lack of validation compliance?
Alternatively, if is not possible to disable the button, can it be done on the Modal component (.ts file)?
How to validate after click button (showing the error messages)?
EDIT: I was reading this ⁷question and its answers, but is related to already added control to FormGroup. It is a different situation.