反应形式验证错误消息未在CustomElement ANGULAR的UI中更新

Question

我在Angular应用程序中创建了自定义元素。该自定义元素具有反应形式。进行表单验证时，UI不会更新。验证功能正在触发。但是，错误消息未在UI中显示/更新。

HTML：

<div class="form-field">
    <input class="text-input" [type]="field.type" [attr.maxLength]="field.maxLength" [formControlName]="field.key"
        [ngClass]="{ disable: !field.editable }" value="{{ field.value }}" [placeholder]="field.placeholder"
        [autofocus]="field.focus" />
    <img class="input-lable-image" src="assets/images/svgs/{{
        field.labelImage }}.svg" *ngIf="field.labelImage" />
    <div *ngIf="field.updateOn == 'blur'">
        <div *ngIf="(!formGroup.controls[field.key].value) && formGroup.controls[field.key].touched && !formSubmitAttempt"
            class="error-msg">
            {{ field.emptyValueMessage }}
        </div>
        <div *ngIf="formGroup.controls[field.key].value && formGroup.controls[field.key].status == 'INVALID' && !formSubmitAttempt && formGroup.controls[field.key].touched"
            class="error-msg">
            {{ field.validationValue }}
        </div>
    </div>
    <div>
        <div *ngIf="(!formGroup.controls[field.key].value) &&
                formSubmitAttempt" class="error-msg">
            {{ field.emptyValueMessage }}
        </div>
    </div>
    <div *ngIf="formGroup.controls[field.key].value &&
        isInvalid(formGroup.controls[field.key], formSubmitAttempt)" class="error-msg">

        {{ field.validationValue }}
    </div>
</div>

请帮助我解决这个问题。

谢谢...

更新：代码段

signupFormInputsConfig = [
    {
      type: "text",
      placeholder: "Enter your full name",
      label: "Name",
      required: true,
      key: "userName",
      labelImage: "user",
      value: "",
      controlType: "inputText",
      editable : true,
      emptyValueMessage:"Please enter valid name",
      validationValue:"Please enter your name",
      validators: [Validators.required],
      focus : true
    }]

转换为反应形式：

toReactiveForm(inputs: Array<{}>) {
    let group = {};
    inputs.forEach(input => {
        if (input["controlType"] === "formGroup") {
            group[input["key"]] = this.toReactiveForm(input["formInputs"]);
        } else if (input["controlType"] === "formArray") {
            let formArray = this.formBuilder.array([]);
            input["formInputs"].forEach(formGroup => {
                let fGroup = this.toReactiveForm(formGroup["formInputs"]);
                formArray.push(fGroup);
            });
            group[input["key"]] = formArray;
        } else if (input["controlType"] === "submitButton") {
            //Don't add to form Group
        } else {
            group[input["key"]] = [input["value"] || "", input["validators"]];
        }
    });
    return this.formBuilder.group(group);
}

验证功能：

static validateMobile(control: FormControl): any {
    var regex = /^[1-9]{1}[0-9]{9}$/;
    var found = regex.test(control.value);
    return found ? null : { mobile: true };
}

  static validateConsentPin(control: FormControl): any {
    var regex = /^[0-9]{6}$/;
    var found = regex.test(control.value);
    return found ? null : { consentPin: true };
}


  static validateCRN(number): any {
    var regex = /^[0-9A-Za-z]{6,}$/;
    var found = regex.test(number);
    return found ? true : false;
}

验证正在触发，但UI尚未更新。