Typescript Angular5自定义表单控件转换为表单控件

我有这个

HTML

<div [formGroup]="frmStepTwo" fxLayout="column">
    <sfc-account-selector formControlName="account">
    </sfc-account-selector>
</div>

sfc account selector.html

<div class="sfc-account-selector" [formGroup]="ctrlGroup">
    <mat-radio-group
            fxLayout="column"
            (change)="inputChange($event)"
            formControlName="account">
        <mat-radio-button [value]="account" *ngFor="let account of accounts">
            <div>
                <img class="sfc-as-option-icon" [src]="imgBase + account.iconPath"/>
                <div class="sfc-as-label">
                    <span class="sfc-as-name">{{account.serviceName}}</span>
                    <span class="sfc-as-desc">{{account.serviceDescription}}</span>
                </div>
            </div>
        </mat-radio-button>
    </mat-radio-group>

    <small *ngIf="required">REQUIRED</small>
</div>

{{account.serviceName}
{{account.servicescription}
必修的

sfc帐户选择器是一个自定义表单控件。 我面临的问题是，如果我在

上使用required属性，getter和setter将触发。 如果我将控件包装到另一个表单控件中，则不会触发require

当包装到所需的formControl中时，是否有方法更新“所需的”

---

这有点棘手。但我就是这样做的

自定义组件ts

    const isParentControlRequired = function (control: FormControl) {
        if (control.validator !== null) {
            const validator = control.validator({}as AbstractControl);
            return validator && validator.required;
        }
        return false;
    };

    export class someComponent {
          ....

        @Input()
        get required() {
            return this._required;
        }

       set required(req) {
           this._required = coerceBooleanProperty(req);
           this._updateValidators();
           //Emit stateChange to update value in mat-groupCtrl-field
          this.stateChanges.next();
       }

       @Input()
       get disabled() {
           return this._disabled;
       }

       set disabled(dis) {
           this._disabled = coerceBooleanProperty(dis);
           this._disabled ? this.parts.disable() : this.parts.enable();
           this._updateValidators();
           //Emit stateChange to update value in mat-groupCtrl-field
           this.stateChanges.next();
       }

       @Input() formControlName: string;

       private _containerControl: FormControl;

       constructor(private _elRef: ElementRef,
                private _formBuilder: FormBuilder,
                private _focusMonitor: FocusMonitor,
                @Optional() @Host() @SkipSelf()
                private controlContainer: ControlContainer) {

                    this.parts = _formBuilder.group({
                       "pwd": ["", this._baseValidators],
                       "pwdRepeat": ["", this._baseValidators],
                 },
                 {validator: valuesMatchValidation(["pwd", "pwdRepeat"])}
                );

                _focusMonitor.monitor(_elRef.nativeElement, true)
                       .subscribe(origin => {
                            this.focused = !!origin;
                            this.stateChanges.next();
                });
         }


         ngOnInit(): void {

               if (!!this.formControlName && this.controlContainer) {
                     this._containerControl = <FormControl>this.controlContainer.control.get(this.formControlName);
                     this.required = isParentControlRequired(this._containerControl);
        }


        ngDoCheck(): void {
              if (!!this._containerControl) {
                    let parentCtrlDisabled = this._containerControl.disabled;

              if (this.disabled !== parentCtrlDisabled) {
                    this.disabled = parentCtrlDisabled;
              }

             let parentCtrlRequired = isParentControlRequired(this._containerControl) && !parentCtrlDisabled;

            if (this.required !== parentCtrlRequired) {
                 this.required = parentCtrlRequired;
            }
    }

}

const isParentControlRequired=函数（控件：FormControl）{
if（control.validator！==null）{
const validator=control.validator（{}作为AbstractControl）；
返回validator&&validator.required；
}
返回false；
};
导出类组件{
....
@输入（）
获取必需的（）{
返回此文件。_需要时；
}
需要设置（req）{
此._required=强制执行一个属性（req）；
这个；
//发出状态更改以更新mat groupCtrl字段中的值
this.stateChanges.next（）；
}
@输入（）
禁用（）{
返回此项。\u已禁用；
}
设置为禁用（dis）{
此._disabled=强制执行对象属性（dis）；
this.u disabled？this.parts.disable（）：this.parts.enable（）；
这个；
//发出状态更改以更新mat groupCtrl字段中的值
this.stateChanges.next（）；
}
@Input（）formControlName:字符串；
专用集装箱控制：FormControl；
构造函数（私有_elRef:ElementRef，
private _formBuilder:formBuilder，
专用聚焦监视器：聚焦监视器，
@可选（）@Host（）@SkipSelf（）
专用controlContainer:controlContainer）{
this.parts=\u formBuilder.group({
“pwd”：[“”，this.\u baseValidators]，
“pwdRepeat”：[“”，this.\u baseValidators]，
},
{验证器：valuesMatchValidation（[“pwd”，“pwdRepeat”]）}
);
_focusMonitor.monitor（_elRef.nativeElement，true）
.订阅（来源=>{
这个。聚焦=！！原点；
this.stateChanges.next（）；
});
}
ngOnInit（）：void{
if（！！this.formControlName&&this.controlContainer）{
this.\u containerControl=this.controlContainer.control.get（this.formControlName）；
this.required=isParentControlRequired（this.\u container control）；
}
ngDoCheck（）：void{
如果（！！此。_集装箱控制）{
让parentCtrlDisabled=this.\u container control.disabled；
如果（this.disabled！==parentCtrlDisabled）{
this.disabled=parentCtrlDisabled；
}
让parentCtrlRequired=isParentControlRequired（this.\u containerControl）和&！parentCtrlDisabled；
如果（this.required！==parentCtrlRequired）{
this.required=parentCtrlRequired；
}
}
}

    const isParentControlRequired = function (control: FormControl) {
        if (control.validator !== null) {
            const validator = control.validator({}as AbstractControl);
            return validator && validator.required;
        }
        return false;
    };

    export class someComponent {
          ....

        @Input()
        get required() {
            return this._required;
        }

       set required(req) {
           this._required = coerceBooleanProperty(req);
           this._updateValidators();
           //Emit stateChange to update value in mat-groupCtrl-field
          this.stateChanges.next();
       }

       @Input()
       get disabled() {
           return this._disabled;
       }

       set disabled(dis) {
           this._disabled = coerceBooleanProperty(dis);
           this._disabled ? this.parts.disable() : this.parts.enable();
           this._updateValidators();
           //Emit stateChange to update value in mat-groupCtrl-field
           this.stateChanges.next();
       }

       @Input() formControlName: string;

       private _containerControl: FormControl;

       constructor(private _elRef: ElementRef,
                private _formBuilder: FormBuilder,
                private _focusMonitor: FocusMonitor,
                @Optional() @Host() @SkipSelf()
                private controlContainer: ControlContainer) {

                    this.parts = _formBuilder.group({
                       "pwd": ["", this._baseValidators],
                       "pwdRepeat": ["", this._baseValidators],
                 },
                 {validator: valuesMatchValidation(["pwd", "pwdRepeat"])}
                );

                _focusMonitor.monitor(_elRef.nativeElement, true)
                       .subscribe(origin => {
                            this.focused = !!origin;
                            this.stateChanges.next();
                });
         }


         ngOnInit(): void {

               if (!!this.formControlName && this.controlContainer) {
                     this._containerControl = <FormControl>this.controlContainer.control.get(this.formControlName);
                     this.required = isParentControlRequired(this._containerControl);
        }


        ngDoCheck(): void {
              if (!!this._containerControl) {
                    let parentCtrlDisabled = this._containerControl.disabled;

              if (this.disabled !== parentCtrlDisabled) {
                    this.disabled = parentCtrlDisabled;
              }

             let parentCtrlRequired = isParentControlRequired(this._containerControl) && !parentCtrlDisabled;

            if (this.required !== parentCtrlRequired) {
                 this.required = parentCtrlRequired;
            }
    }

}