@angular/forms#NgControl TypeScript Examples

constructor(
    @Self() @Optional() private control: NgControl,
    private errorState: LgErrorStateMatcher,
    @Optional()
    @Host()
    @SkipSelf()
    private controlContainer: FormGroupDirective,
    private domService: LgDomService,
    private renderer: Renderer2,
    private hostElement: ElementRef,
  ) {
    this.variant = this.hostElement.nativeElement.tagName
      .split('-')[1]
      .toLowerCase() as CheckboxGroupVariant;

    if (this.control != null) {
      this.control.valueAccessor = this;
    }
  }

constructor(
		public ngControl: NgControl,
		public permissionService: PermissionService,
		public permissionQuery: PermissionQuery,
		public sessionQuery: SessionQuery,
		public formBuilder: FormBuilder,
	) {
		ngControl.valueAccessor = this;
	}

mapControlStatus(control: NgControl) {
    return (
      this.parentForm
        ? combineLatest([
            control.statusChanges.pipe(startWith(control.status)),
            merge(
              this.parentForm.statusChanges.pipe(
                startWith(this.parentForm.status),
              ),
              this.parentForm.ngSubmit,
            ),
          ]).pipe(map(([status]: string[]) => status))
        : control.statusChanges
    ).pipe(
      map(
        (status: string) =>
          status === 'INVALID' && (control.dirty || this.parentForm?.submitted),
      ),
      publishRef(),
    );
  }

constructor(
		public ngControl: NgControl,
		public permissionService: PermissionService,
		public permissionQuery: PermissionQuery,
		public sessionQuery: SessionQuery,
		public formBuilder: FormBuilder,
	) {
		ngControl.valueAccessor = this;
	}

/**
   * This function is used to determine whether a specific form field is in an
   * error state.
   *
   * @param control -
   * The input control to check
   * @param controlContainer -
   * The form group that the input is part of
   * @return The error state of the property
   *
   * @example
   *     isControlInvalid(nameInput, registrationForm);
   *     // returns true
   */
  isControlInvalid(
    control: AbstractControl | NgControl,
    controlContainer?: FormGroupDirective,
  ): boolean {
    return !!(
      (control && control.invalid && control.touched && control.dirty) ||
      (controlContainer && controlContainer.submitted && control.invalid)
    );
  }

ngOnInit(): void {
    setTimeout(() => {
      this.control = this.injector.get(NgControl);

      if (!this.control || !this.control.valueAccessor) {
        return;
      }

      const originalWriteVal = this.control.valueAccessor.writeValue.bind(
        this.control.valueAccessor
      );
      this.control.valueAccessor.writeValue = (val: any) =>
        originalWriteVal(this._maskValue(val));

      const originalChange = (this.control.valueAccessor as any).onChange.bind(
        this.control.valueAccessor
      );
      this.control.valueAccessor.registerOnChange((val: any) =>
        originalChange(this._unmaskValue(val))
      );

      this._setVal(this._maskValue(this.control.value));
    }, 10);
  }

constructor(protected _elementRef: ElementRef<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>,
    protected _platform: Platform,
    private _cd: ChangeDetectorRef,
    @Optional() @Self() public ngControl: NgControl,
    @Optional() _parentForm: NgForm,
    @Optional() _parentFormGroup: FormGroupDirective,
    _defaultErrorStateMatcher: ErrorStateMatcher) {
    super(_defaultErrorStateMatcher, _parentForm, _parentFormGroup, ngControl);

    this.id = this.id;

    if (this.ngControl) {
      this.ngControl.valueAccessor = this;
    }

  }

constructor(@Self() @Optional() controlDirective: NgControl) {
    super(
      controlDirective,
      typedFormGroup<PersonContact>({
        name: typedFormControl<string>(),
        email: typedFormControl<string>()
      })
    );
  }

ngOnInit() {
    this.ngControl = this.injector.get(NgControl);

    this.fg = this.fb.group({
      currency: [], // currency which is currently shown
      amount: [], // amount which is currently shown
      homeCurrencyAmount: [], // Amount converted to home currency
    });

    this.fg.valueChanges.subscribe((formValue) => {
      const value = {
        amount: null,
        currency: null,
        orig_amount: null,
        orig_currency: null,
      };

      if (formValue.currency !== this.homeCurrency) {
        value.currency = this.homeCurrency;

        value.orig_amount = +formValue.amount;
        value.orig_currency = formValue.currency;
        if (value.orig_currency === this.value.orig_currency) {
          value.amount = value.orig_amount * (this.value.amount / this.value.orig_amount);
        } else {
          value.amount = +formValue.homeCurrencyAmount;
        }
      } else {
        value.currency = this.homeCurrency;
        value.amount = formValue.amount && +formValue.amount;
      }

      if (!this.checkIfSameValue(value, this.innerValue)) {
        this.value = value;
      }
    });
  }

constructor(
    @Self() @Optional() private control: NgControl,
    private errorState: LgErrorStateMatcher,
    @Optional()
    @Host()
    @SkipSelf()
    private controlContainer: FormGroupDirective,
    private domService: LgDomService,
    private hostElement: ElementRef,
    private renderer: Renderer2,
  ) {
    this.variant = this.hostElement.nativeElement.tagName
      .split('-')[1]
      .toLowerCase() as RadioVariant;

    if (this.control != null) {
      this.control.valueAccessor = this;
    }
  }

ngOnInit() {
    this.ngControl = this.injector.get(NgControl);

    this.fg = this.fb.group({
      currency: [], // currency which is currently shown
      amount: [], // amount which is currently shown
    });

    this.fg.valueChanges.subscribe((formValue) => {
      const value = {
        amount: null,
        currency: null,
      };

      if (formValue.amount !== null) {
        value.amount = +formValue.amount;
      }
      value.currency = formValue.currency;

      if (!this.checkIfSameValue(value, this.innerValue)) {
        this.value = value;
      }
    });
  }

constructor(
    @Self() @Optional() public control: NgControl,
    @Inject(forwardRef(() => LgRadioGroupComponent))
    private radioGroup: LgRadioGroupComponent,
    private errorState: LgErrorStateMatcher,
    @Optional()
    @Host()
    @SkipSelf()
    private controlContainer: FormGroupDirective,
    private renderer: Renderer2,
    private hostElement: ElementRef,
    private domService: LgDomService,
  ) {}

ngOnInit() {
    this.ngControl = this.injector.get(NgControl);

    this.form.controls.roundTrip.valueChanges.subscribe((roundTrip) => {
      if (!this.skipRoundTripUpdate) {
        if (this.formInitialized) {
          if (this.form.value.distance) {
            if (roundTrip) {
              this.form.controls.distance.setValue((+this.form.value.distance * 2).toFixed(2));
            } else {
              this.form.controls.distance.setValue((+this.form.value.distance / 2).toFixed(2));
            }
          }
        }
      } else {
        this.skipRoundTripUpdate = false;
      }
    });
  }

constructor(public ngControl: NgControl) {
		ngControl.valueAccessor = this;
	}

ngOnInit() {
    this.ngControl = this.injector.get(NgControl);
  }

constructor(
		public ngControl: NgControl,
		private dynamicInputService: DynamicInputService
	) {
		ngControl.valueAccessor = this;
	}

private control: NgControl;

constructor(@Optional() @Self() private directive: NgControl, form: TypedFormGroup<T, C>) {
    if (directive) {
      directive.valueAccessor = this;
    }
    this.form = form;
  }

private ngControl: NgControl;

constructor(public ngControl: NgControl) {
		ngControl.valueAccessor = this;
	}

isControlInvalid(control: NgControl, form: FormGroupDirective) {
    return this.errorState.isControlInvalid(control, form);
  }

constructor(public ngControl: NgControl) {
		ngControl.valueAccessor = this;
	}

isControlInvalid(control: NgControl, form: FormGroupDirective) {
    return this.errorState.isControlInvalid(control, form);
  }

constructor(public ngControl: NgControl) { }

// 外层 FormControl，所有的校验逻辑针对输入数据
  controlContainer: NgControl;

isControlInvalid(control: NgControl, form: FormGroupDirective) {
    return this.errorState.isControlInvalid(control, form);
  }

private ngControl: NgControl;

constructor(private ngControl: NgControl) {}

ngOnInit() {
    this.ngControl = this.injector.get(NgControl);
  }