{{ node.groupDetail.name }} {{ node.children?.length }}
{{ input.value?.length || 0 }}/20
@Component({ selector: 'app-group-input', templateUrl: './group-input.component.html', styleUrls: ['./group-input.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush }) export class GroupInputComponent implements OnInit, OnDestroy { private ngOnDestroySubject = new Subject(); @Input() set groupName(g: string) { this._groupName = g; } get groupName(): string { return this._groupName; } _groupName: string; @Input() inputPlacholder: string; @Input() dialogType: SelectUserDialogType; @Input() componentSeq: number; @Input() groupList?: GroupDetailData[]; @Output() cancel = new EventEmitter(); @Output() confirm = new EventEmitter(); @Output() completeConfirm = new EventEmitter(); constructor( private formBuilder: FormBuilder, private i18nService: I18nService ) {} inputForm: FormGroup; ngOnInit(): void { this.inputForm = this.formBuilder.group({ groupName: [ this.groupName, [ Validators.required // StringUtil.includes(, CharactorType.Special), // this.checkBanWords(), // this.checkSameName() ] ] }); } ngOnDestroy(): void { if (!!this.ngOnDestroySubject) { this.ngOnDestroySubject.complete(); } } getGroupName(): string { return this.inputForm.get('groupName').value; } onKeyupGroupName() { this.inputForm.get('groupName').markAsTouched(); } checkSameName(): ValidatorFn { return (control: AbstractControl): { [key: string]: any } | null => { if ( !control || !control.value || !this.groupList || 0 === this.groupList.length ) { return null; } const v = (control.value as string).trim(); const ban = -1 < this.groupList.findIndex((g) => g.name === v); return ban ? { groupNameSamed: { value: control.value } } : null; }; } onCancel() { this.cancel.emit(); } onConfirm() { this.confirm.emit(); } onCompleteConfirm() { this.completeConfirm.emit(); } }