How to use the @angular/forms.FormArray function in @angular/forms

To help you get started, we’ve selected a few @angular/forms examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github nayfin / tft-library / projects / tft-library / src / lib / dynamic-form / dynamic-form.helpers.ts View on Github external
export function createControlForType(controlConfig: AnyFieldConfig, value: any) {
  // build form control out based on the control type
  const control = controlConfig.controlType === ControlType.GROUP
    ? buildFormGroupFromConfig(controlConfig as FormConfig, value)
    : controlConfig.controlType === ControlType.GROUP_LIST
    ? new FormArray([], (controlConfig as FormGroupListConfig).validators)
    : new FormControl(
      isRealValue(value) ? value : null,
      (controlConfig as DynamicFieldConfig).validators || null
    );
  // if it was a GROUP_LIST and it had initial values passed in, add the values to the form array
  if (controlConfig.controlType === ControlType.GROUP_LIST && Array.isArray(value)) {
    value.forEach( item => {
      (control as FormArray).push( createControlForType((controlConfig as FormGroupListConfig).itemConfig, item));
    });
  }
  return control;
}
github rabix / composer / src / app / editor-common / input-value-editor / input-value-editor.component.ts View on Github external
private patchArrayValue(update: any[], options: { onlySelf?: boolean, emitEvent?: boolean }) {

        const updateIsSameSize  = update.length === (this.control as FormArray).length;
        const serializesEqually = () => JSON.stringify(update) === JSON.stringify(this.control.value);
        const shouldNotEmit     = options.emitEvent === false;

        // This solves a problem that
        if (updateIsSameSize && shouldNotEmit && serializesEqually()) {
            return;
        }

        if (!updateIsSameSize) {
            const ctrlArr = Array.apply(null, Array(update.length)).map(() => this.makeControlForArray());
            this.control  = new FormArray(ctrlArr);
            this.readonly ? this.control.disable(options) : this.control.enable(options);
            this.bindFileMetadataSyncOnControlChanges();
            this.bindValuePropagationOnControlSetup();
        }

        this.control.setValue(update, options);
    }
github notadd / ng-notadd / src / @notadd / components / table-export / table-export-picker.component.ts View on Github external
ngOnInit() {
        this.pickerForm = this.formBuilder.group({
            headers: new FormArray(this.optionHeaders.map(_ => new FormControl(true)), noEmpty()),
            row: this.formBuilder.group({
                type: ['all', Validators.required],
                length: ['']
            }, { validator: rowValidator(this.data.rowLength) })
        });
    }
github cyclosproject / cyclos4-ui / src / app / users / profile / edit-profile.component.ts View on Github external
save(confirmationPassword?: string) {
    const fullForm = new FormGroup({
      user: this.user,
      createLandLinePhones: new FormArray(this.createLandLinePhones),
      modifyLandLinePhones: new FormArray(this.modifyLandLinePhones),
      createMobilePhones: new FormArray(this.createMobilePhones),
      modifyMobilePhones: new FormArray(this.modifyMobilePhones),
      createAddresses: new FormArray(this.createAddresses),
      modifyAddresses: new FormArray(this.modifyAddresses),
      createContactInfos: new FormArray(this.createContactInfos),
      modifyContactInfos: new FormArray(this.modifyContactInfos)
    });
    if (!confirmationPassword && this.confirmationPassword) {
      fullForm.setControl('confirmationPassword', this.confirmationPassword);
      confirmationPassword = this.confirmationPassword.value;
    }
    if (!validateBeforeSubmit(fullForm)) {
      return;
    }

    this.addSub(this.usersService.saveUserFullProfile({
      user: this.param,
      confirmationPassword: confirmationPassword,
      body: this.editForSubmit()
    }).subscribe(() => {
github bcswartz / angular2-sandbox-guildrunner / src / app / sandbox / chapter-reactive-form / chapter-reactive-form.component.ts View on Github external
buildForm() {

    //Create a custom Validator function for the defenses array
    function hasDefenses( formArray: FormArray) {
      let valid = false;
      for( let c in formArray.controls ) {
        if( formArray.controls[c].value == true ) { valid = true }
      }
      return valid == true ? null : { 'noDefenses': { 'noDefenses': true, 'message': 'Chapter must have at least one defense.' } }
    }

    //Construct and populate the defenses FormArray outside of the FormBuilder so we can populate it dynamically
    this.defenseBoxArray = new FormArray( [], hasDefenses );
    for( let d in this.defenseArray ) {
      this.defenseBoxArray.push( new FormControl(( this.chapter.defenses.indexOf( this.defenseArray[d].id ) > -1 )))
    }

    this.form = this.formBuilder.group( {
      'name': [
        this.chapter.name,
        this.applyRules(
          this.chapter,
          'name',
          { minLength: { minLength: 4, message: 'The name must be at least 4 characters.' } }
        )
      ],
      'guild': [
        this.chapter.guildId,
        this.applyRules( this.chapter, 'guild' )
github anihalaney / rwa-trivia / projects / trivia / src / app / user / components / question-add-update / question-add-update.component.ts View on Github external
createForm(question: Question) {

    const answersFA: FormArray = super.createDefaultForm(question);

    let fcs: FormControl[] = question.tags.map(tag => {
      const fc = new FormControl(tag);
      return fc;
    });
    if (fcs.length === 0) {
      fcs = [new FormControl('')];
    }

    const tagsFA = new FormArray(fcs);

    this.questionForm = this.fb.group({
      category: [(question.categories.length > 0 ? question.categories[0] : ''), Validators.required],
      questionText: [question.questionText,
      Validators.compose([Validators.required, Validators.maxLength(this.applicationSettings.question_max_length)])],
      tags: '',
      tagsArray: tagsFA,
      answers: answersFA,
      ordered: [question.ordered],
      explanation: [question.explanation]
    }, { validator: questionFormValidator }
    );
  }
github anihalaney / rwa-trivia / projects / trivia-admin / src / app / user / components / question-add-update / question-add-update.component.ts View on Github external
let fgs: FormGroup[] = question.answers.map(answer => {
      let fg = new FormGroup({
        answerText: new FormControl(answer.answerText, Validators.required),
        correct: new FormControl(answer.correct),
      });
      return fg;
    });
    let answersFA = new FormArray(fgs);

    let fcs: FormControl[] = question.tags.map(tag => {
      let fc = new FormControl(tag);
      return fc;
    });
    if (fcs.length == 0)
      fcs = [new FormControl('')];
    let tagsFA = new FormArray(fcs);

    this.questionForm = this.fb.group({
      category: [(question.categories.length > 0 ? question.categories[0] : ''), Validators.required],
      questionText: [question.questionText, Validators.required],
      tags: '',
      tagsArray: tagsFA,
      answers: answersFA,
      ordered: [question.ordered],
      explanation: [question.explanation]
    }, { validator: questionFormValidator }
    );
  }
github unfetter-discover / unfetter-ui / src / app / global / form-models / indicator.ts View on Github external
export const IndicatorForm = () => {
    return new FormGroup({
        name: new FormControl('', Validators.required),
        description: new FormControl(),
        labels: new FormArray([]),
        pattern: new FormControl('', Validators.required),
        created_by_ref: new FormControl('', Validators.required),
        valid_from: new FormControl(new Date(), Validators.required),
        valid_until: new FormControl(),
        object_marking_refs: new FormControl([]),
        external_references: new FormArray([]),
        kill_chain_phases: new FormArray([]),
        x_mitre_data_sources: new FormControl([]),
        metaProperties: new FormGroup({
            observedData: new FormArray([]),
            additional_queries: new FormArray([]),
            relationships: new FormControl([]),
            queries: new FormGroup({
                carElastic: new FormGroup({
                    query: new FormControl(''),
                    include: new FormControl(true)
                }),
                carSplunk: new FormGroup({
                    query: new FormControl(''),
                    include: new FormControl(true)
                }),
                cimSplunk: new FormGroup({
                    query: new FormControl(''),
                    include: new FormControl(true)
                })
            }),
            validStixPattern: new FormControl(false),
github apereo / cas-management / webapp / cas-mgmt-webapp-workspace / projects / management / src / app / form / tab-properties / properties-form.ts View on Github external
constructor(private service: AbstractRegisteredService) {
    super({
      properties: new FormArray([])
    });
    const props = new FormArray([]);
    if (this.service.properties) {
      for (let i = 0; i < Array.from(Object.keys(this.service.properties)).length; i++) {
        props.push(new FormGroup({
          key: new MgmtFormControl(null, null, Validators.required),
          value: new MgmtFormControl(null, null, Validators.required)
        }));
      }
    }
    this.setControl('properties', props);
    this.setValue(this.formMap());
  }