@angular/forms#FormGroupDirective TypeScript Examples

The following examples show how to use @angular/forms#FormGroupDirective. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: checkbox-group.component.ts    From canopy with Apache License 2.0 6 votes vote down vote up 
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;
    }
  }
Example #2
Source File: user.component.ts    From enterprise-ng-2020-workshop with MIT License 6 votes vote down vote up 
onSubmit(userFormRef: FormGroupDirective) {
    if (this.userForm.valid) {
      const data = this.userForm.getRawValue();
      if (data.id && data.id.length) {
        this.userService.updateUser(data);
      } else {
        this.userService.addUser({ ...data });
      }
      userFormRef.resetForm();
      this.userForm.reset();
    }
  }
Example #3
Source File: file-input.component.ts    From angular-material-components with MIT License 6 votes vote down vote up 
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;
    }

  }
Example #4
Source File: form-item.component.ts    From alauda-ui with MIT License 6 votes vote down vote up 
constructor(
    private readonly cdr: ChangeDetectorRef,
    @Optional() private readonly auiForm: FormDirective,
    @Optional() ngForm: NgForm,
    @Optional() formGroup: FormGroupDirective,
  ) {
    this.parentForm = formGroup || ngForm;
    if (this.auiForm) {
      this.subscribeInputsFromParent();
    }
  }
Example #5
Source File: error-state-matcher.ts    From canopy with Apache License 2.0 6 votes vote down vote up 
/**
   * 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)
    );
  }
Example #6
Source File: toggle.component.ts    From canopy with Apache License 2.0 6 votes vote down vote up 
constructor(
    @Self() @Optional() public control: NgControl,
    @Optional()
    @Inject(forwardRef(() => LgCheckboxGroupComponent))
    private checkboxGroup: LgCheckboxGroupComponent,
    private domService: LgDomService,
    private errorState: LgErrorStateMatcher,
    @Optional()
    @Host()
    @SkipSelf()
    private controlContainer: FormGroupDirective,
    private hostElement: ElementRef,
  ) {
    this.selectorVariant = this.hostElement.nativeElement.tagName
      .split('-')[1]
      .toLowerCase();

    if (this.checkboxGroup) {
      return;
    }

    if (this.control != null) {
      this.control.valueAccessor = this;
    }
  }
Example #7
Source File: radio-group.component.ts    From canopy with Apache License 2.0 6 votes vote down vote up 
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;
    }
  }
Example #8
Source File: radio-button.component.ts    From canopy with Apache License 2.0 6 votes vote down vote up 
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,
  ) {}
Example #9
Source File: add-cases.component.ts    From angular-9-coronavirus-cases-app with MIT License 5 votes vote down vote up 
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    const isSubmitted = form && form.submitted;
    return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
  }
Example #10
Source File: error-select.component.ts    From matx-angular with MIT License 5 votes vote down vote up 
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    const isSubmitted = form && form.submitted;
    return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
  }
Example #11
Source File: error-input.component.ts    From matx-angular with MIT License 5 votes vote down vote up 
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    const isSubmitted = form && form.submitted;
    return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
  }
Example #12
Source File: formErrorStateMatcher.ts    From tuxedo-control-center with GNU General Public License v3.0 5 votes vote down vote up 
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
        const invalidCtrl = !!(control && control.invalid && control.parent.dirty);
        const invalidParent = !!(control && control.parent && control.parent.invalid && control.parent.dirty);

        return (invalidCtrl || invalidParent);
    }
Example #13
Source File: doraErrorStateMatcher.ts    From HeartBeat with MIT License 5 votes vote down vote up 
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    const isSubmitted = form && form.submitted;
    return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
  }
Example #14
Source File: checkbox-group.component.spec.ts    From canopy with Apache License 2.0 5 votes vote down vote up 
isControlInvalid(control: NgControl, form: FormGroupDirective) {
    return this.errorState.isControlInvalid(control, form);
  }
Example #15
Source File: date-field.component.spec.ts    From canopy with Apache License 2.0 5 votes vote down vote up 
@ViewChild('testForm')
  testFormDirective: FormGroupDirective;
Example #16
Source File: upload-assets.component.ts    From assetMG with Apache License 2.0 5 votes vote down vote up 
isErrorState(
    control: FormControl | null,
    form: FormGroupDirective | NgForm | null
  ): boolean {
    return control.dirty && form.invalid;
  }
Example #17
Source File: edit-sales.component.ts    From mean-stack-angular-9-realtime-crud with MIT License 5 votes vote down vote up 
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    const isSubmitted = form && form.submitted;
    return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
  }
Example #18
Source File: add-sales.component.ts    From mean-stack-angular-9-realtime-crud with MIT License 5 votes vote down vote up 
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    const isSubmitted = form && form.submitted;
    return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
  }
Example #19
Source File: login.component.ts    From angular-9-firebase-chat-example with MIT License 5 votes vote down vote up 
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    const isSubmitted = form && form.submitted;
    return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
  }
Example #20
Source File: chatroom.component.ts    From angular-9-firebase-chat-example with MIT License 5 votes vote down vote up 
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    const isSubmitted = form && form.submitted;
    return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
  }
Example #21
Source File: addroom.component.ts    From angular-9-firebase-chat-example with MIT License 5 votes vote down vote up 
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    const isSubmitted = form && form.submitted;
    return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
  }
Example #22
Source File: edit-cases.component.ts    From angular-9-coronavirus-cases-app with MIT License 5 votes vote down vote up 
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    const isSubmitted = form && form.submitted;
    return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
  }
Example #23
Source File: signing.component.ts    From blockcore-hub with MIT License 5 votes vote down vote up 
clear(form: FormGroupDirective) {
        form.resetForm();
    }
Example #24
Source File: form-item.component.ts    From alauda-ui with MIT License 5 votes vote down vote up 
parentForm: NgForm | FormGroupDirective;
Example #25
Source File: date-field.component.ts    From canopy with Apache License 2.0 5 votes vote down vote up 
isControlInvalid(control: NgControl, form: FormGroupDirective): boolean {
    return this.errorState.isControlInvalid(control, form);
  }
Example #26
Source File: form.stories.ts    From canopy with Apache License 2.0 5 votes vote down vote up 
isControlInvalid(control: NgControl, form: FormGroupDirective) {
    return this.errorState.isControlInvalid(control, form);
  }
Example #27
Source File: date-field.component.ts    From canopy with Apache License 2.0 5 votes vote down vote up 
constructor(
    private domService: LgDomService,
    private errorState: LgErrorStateMatcher,
    @Self()
    @Optional()
    private ngControl: NgControl,
    @Optional()
    @Host()
    @SkipSelf()
    private parentFormGroupDirective: FormGroupDirective,
  ) {
    if (this.ngControl != null) {
      this.ngControl.valueAccessor = this;
    }

    this.date = new FormControl(null, [
      Validators.required,
      Validators.pattern(/^\d{1,2}$/),
      Validators.min(1),
      Validators.max(31),
    ]);

    this.month = new FormControl(null, [
      Validators.required,
      Validators.pattern(/^\d{1,2}$/),
      Validators.min(1),
      Validators.max(12),
    ]);

    this.year = new FormControl(null, [
      Validators.required,
      Validators.pattern(/^\d\d\d\d$/),
    ]);

    this.dateFormGroup = new FormGroup(
      {
        date: this.date,
        month: this.month,
        year: this.year,
      },
      {
        updateOn: 'blur',
      },
    );
  }
Example #28
Source File: error-state-matcher.spec.ts    From canopy with Apache License 2.0 5 votes vote down vote up 
describe('LgErrorStateMatcher', () => {
  let service: LgErrorStateMatcher;
  let control: NgControl;
  let controlContainer: FormGroupDirective;

  beforeEach(() => {
    service = new LgErrorStateMatcher();
    control = mock(NgControl);
    controlContainer = mock(FormGroupDirective);
  });

  describe('isControlInvalid', () => {
    describe('invalid states', () => {
      it('control is invalid, touched and dirty', () => {
        when(control.invalid).thenReturn(true);
        when(control.touched).thenReturn(true);
        when(control.dirty).thenReturn(true);

        expect(service.isControlInvalid(instance(control))).toBe(true);
      });

      it('control is invalid and untouched and form is submitted', () => {
        when(control.invalid).thenReturn(true);
        when(control.touched).thenReturn(false);
        when(controlContainer.submitted).thenReturn(true);

        expect(
          service.isControlInvalid(instance(control), instance(controlContainer)),
        ).toBe(true);
      });
    });

    describe('pending states', () => {
      it('control is invalid and not touched', () => {
        when(control.invalid).thenReturn(true);
        when(control.touched).thenReturn(false);
        when(control.dirty).thenReturn(false);

        expect(service.isControlInvalid(instance(control))).toBe(false);
      });

      it('control is not invalid and not touched', () => {
        when(control.invalid).thenReturn(false);
        when(control.touched).thenReturn(false);
        when(control.dirty).thenReturn(false);

        expect(service.isControlInvalid(instance(control))).toBe(false);
      });

      it('control is valid and touched', () => {
        when(control.invalid).thenReturn(false);
        when(control.touched).thenReturn(true);
        when(control.dirty).thenReturn(true);

        expect(service.isControlInvalid(instance(control))).toBe(false);
      });

      it('control is valid and untouched and form is submitted', () => {
        when(control.invalid).thenReturn(false);
        when(control.touched).thenReturn(false);
        when(control.dirty).thenReturn(false);
        when(controlContainer.submitted).thenReturn(true);

        expect(
          service.isControlInvalid(instance(control), instance(controlContainer)),
        ).toBe(false);
      });
    });
  });
});
Example #29
Source File: date-field.component.ts    From canopy with Apache License 2.0 5 votes vote down vote up 
@ViewChild('dateFormDirective')
  formGroupDirective: FormGroupDirective;