TypeScript core.FormlyFormBuilder类代码示例

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

本文整理汇总了TypeScript中@ngx-formly/core.FormlyFormBuilder类的典型用法代码示例。如果您正苦于以下问题：TypeScript FormlyFormBuilder类的具体用法？TypeScript FormlyFormBuilder怎么用？TypeScript FormlyFormBuilder使用的例子？那么恭喜您, 这里精选的类代码示例或许可以为您提供帮助。

在下文中一共展示了FormlyFormBuilder类的2个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。

示例1: describe

describe('FieldExpressionExtension', () => {
  let form: FormGroup;
  let options: FormlyFormOptionsCache;
  let builder: FormlyFormBuilder;
  let TestComponent: Component;

  beforeEach(() => {
    TestComponent = MockComponent({ selector: 'formly-test-cmp' });
    TestBed.configureTestingModule({
      declarations: [TestComponent, RepeatComponent],
      imports: [
        FormlyModule.forRoot({
          types: [
            { name: 'input', component: TestComponent },
            { name: 'checkbox', component: TestComponent },
            { name: 'repeat', component: RepeatComponent },
          ],
          wrappers: [{ name: 'label', component: TestComponent, types: ['input'] }],
          validators: [{ name: 'required', validation: Validators.required }],
        }),
      ],
    });
  });

  beforeEach(inject([FormlyFormBuilder], (formlyBuilder: FormlyFormBuilder) => {
    form = new FormGroup({});
    options = {
      fieldChanges: new Subject<FormlyValueChangeEvent>(),
    };
    builder = formlyBuilder;
  }));

  describe('field visibility (hideExpression)', () => {
    it('should update field visibility', () => {
      const fields: FormlyFieldConfig[] = [
        {
          key: 'visibilityToggle',
          type: 'input',
        },
        {
          key: 'text',
          type: 'input',
          hideExpression: '!model.visibilityToggle',
        },
      ];
      const model = {};

      builder.buildForm(form, fields, model, options);

      expect(fields[1].hide).toBeTruthy();
      expect(fields[1].templateOptions.hidden).toBeTruthy();

      model['visibilityToggle'] = 'test';

      options._checkField({ formControl: form, fieldGroup: fields, model, options });

      expect(fields[1].hide).toBeFalsy();
      expect(fields[1].templateOptions.hidden).toBeFalsy();
    });

    it('should not override hide field within fieldGroup', () => {
      const fields: FormlyFieldConfig[] = [
        {
          hideExpression: () => false,
          fieldGroup: [
            {
              key: 'test',
              type: 'input',
              hide: true,
            },
          ],
        },
      ];
      const spy = jasmine.createSpy('fieldChanges spy');
      const subscription = options.fieldChanges.subscribe(spy);

      builder.buildForm(form, fields, {}, options);

      expect(fields[0].hide).toBeFalsy();
      expect(fields[0].fieldGroup[0].hide).toBeTruthy();

      expect(spy).toHaveBeenCalledTimes(2);
      subscription.unsubscribe();
    });

    it('should update field visibility within field arrays', () => {
      const fields: FormlyFieldConfig[] = [
        {
          key: 'address',
          type: 'repeat',
          hideExpression: model => model.length !== 1,
          fieldArray: {
            fieldGroup: [
              {
                key: 'city',
                type: 'input',
                hideExpression: 'model.addressIsRequired',
              },
            ],
          },
//.........这里部分代码省略.........

开发者ID:formly-js，项目名称:ng2-formly，代码行数:101，代码来源:field-expression.spec.ts

示例2: it

      it('should update field disabled state', () => {
        const fields: FormlyFieldConfig[] = [
          {
            key: 'disableToggle',
            type: 'checkbox',
          },
          {
            key: 'text',
            type: 'input',
            expressionProperties: {
              'templateOptions.disabled': 'model.disableToggle',
            },
          },
        ];
        const model = {};

        builder.buildForm(form, fields, model, options);

        // manually disable the form control so that service can enable on `checkFields`
        fields[1].templateOptions.disabled = true;

        expect(fields[1].formControl.status).toEqual('DISABLED');

        options._checkField({ formControl: form, fieldGroup: fields, model, options });

        expect(fields[1].formControl.status).toEqual('VALID');
        expect(fields[1].templateOptions.disabled).toBeFalsy();

        model['disableToggle'] = true;

        options._checkField({ formControl: form, fieldGroup: fields, model, options });

        expect(fields[1].formControl.status).toEqual('DISABLED');
        expect(fields[1].templateOptions.disabled).toBeTruthy();
      });

开发者ID:formly-js，项目名称:ng2-formly，代码行数:35，代码来源:field-expression.spec.ts

注：本文中的@ngx-formly/core.FormlyFormBuilder类示例整理自Github/MSDocs等源码及文档管理平台，相关代码片段筛选自各路编程大神贡献的开源项目，源码版权归原作者所有，传播和使用请参考对应项目的License；未经允许，请勿转载。