Can{t get model with a FormGroup inside a FormArray inside a nested FormGroup

[fershous]

Here are the models:

/// [UserProfile] model
@freezed
@ReactiveFormAnnotation()
@FormGroupAnnotation()
class UserProfile with _$UserProfile, BaseUser, NexusElement {
  const factory UserProfile({
    required String id,
    @RfControl(validators: [RequiredValidator()]) required String name,
    required UserProfileType type,
  }) = _UserProfile;

  /// Serialization
  factory UserProfile.fromJson(Map<String, dynamic> json) => _$UserProfileFromJson(json);
}

@ReactiveFormAnnotation()
@FormGroupAnnotation()
class UserProfileType {
  UserProfileType({
    @FormArrayAnnotation() required this.permissions,
    @FormControlAnnotation() required this.value,
  });

  final List<PermissionEntity> permissions;
  final int value;
}

@ReactiveFormAnnotation()
@FormGroupAnnotation()
class PermissionEntity {
  PermissionEntity({
    @FormControlAnnotation() required this.permission,
    @FormControlAnnotation() required this.value,
  });

  final ProfilePermissionsEnum permission;
  final bool value;
}

The problem is that the PermissionEntity is being created as a FormControl<Map<String, Object?>> and it won't read it as a FormGroup . Unless I'm doing something wrong, I think there's something bad happening.

I have used FormArrays as FormGroups and indeed it read it as FormControl<Map<String, Object?>> but it works if I just cast it as FormGroup maybe a cast is missing when getting the value.

[fershous]

So, I simple it down to this:

part 'user_profile.freezed.dart';

part 'user_profile.g.dart';

part 'user_profile.gform.dart';

/// [UserProfile] model
@freezed
@ReactiveFormAnnotation()
class UserProfile with _$UserProfile, BaseUser, NexusElement, RestrictedPermissions {
  const UserProfile._();

  /// Factory constructor
  /// [id] - [UserProfile] id
  @JsonSerializable(fieldRename: FieldRename.snake, explicitToJson: true)
  const factory UserProfile({
    required String id,
    //
    @FormControlAnnotation(validators: [RequiredValidator()]) required String name,
    //
    @JsonKey(name: "pass")
    @FormControlAnnotation(validators: [RequiredValidator()])
    required String passwordHash,
    //
    @JsonKey(
      name: 'perm',
      fromJson: _userProfilePermissionsFromJson,
      toJson: _userProfilePermissionsToJson,
    )
    @FormArrayAnnotation()
    required List<PermissionEntity> permissions,
    //
    @JsonKey(name: "bdte", fromJson: fromJsonTimestamp, toJson: toJsonTimestamp)
    @FormControlAnnotation()
    required DateTime? birthDate,
    //
    @JsonKey(name: "tel") @FormControlAnnotation() required int? phoneNumber,
  }) = _UserProfile;

  /// Serialization
  factory UserProfile.fromJson(Map<String, dynamic> json) => _$UserProfileFromJson(json);

  bool validate(String enteredPassword) {
    return Crypt(passwordHash).match(enteredPassword);
  }
}

@FormGroupAnnotation()
class PermissionEntity {
  PermissionEntity({
    @FormControlAnnotation() required this.permission,
    @FormControlAnnotation() required this.value,
  });

  final ProfilePermissionsEnum permission;
  final bool value;
}

Now if I try to print the model it works. But I can't build the ReactiveFormArrayBuilder here's the code

ReactiveFormArray<Map<String, Object?>>(
  formArray: formModel.permissionsControl,
  builder: (context, formArray, child) {
    return Column(
    children: formModel.permissionsControl.controls
      .asMap()
      .map((i, deliveryPoint) {
        return MapEntry(
          i,
          Column(
            children: [
              ReactiveCheckbox(
                formControlName: '${i}.value',
              ),
             ],
           ),
        );
        })
       .values
       .toList(),
    );
  },
),

The problem is that it won't find the {i}.value as there's no way to find the control because it builds the array as a normal array and not putting controls in it.

Am I doing something worng?

I'm using:

reactive_forms_generator: ^4.5.0
reactive_forms: ^16.1.1
reactive_forms_annotations: ^4.3.0

[qwezey]

im facing the same issue. @fershous have you found any solution?

[vasilich6107]

Hey @qwezey could you provide minimally functioning example?
Cause @fershous missing some classes and it's hard to build a reproduction

[ahmednfwela]

you can simply reproduce this by running the example in reactive_forms_generator

and clicking update "setState" with 2 pcs

[ahmednfwela]

The culprit is this:

reactive_forms_generator/packages/reactive_forms_generator/example/lib/docs/animated_url_list/animated_url_list.gform.dart

Lines 505 to 512 in 2ae6bcf

	@override
	void updateValue(
	AnimatedUrlList? value, {
	bool updateParent = true,
	bool emitEvent = true,
	}) =>
	form.updateValue(AnimatedUrlListForm.formElements(value).rawValue,
	updateParent: updateParent, emitEvent: emitEvent);

when you give form.updateValue a List<Map<String,Object?>> it maps each one to a FormControl<Map<String,Object?>> not a FormGroup

see here:

https://github.com/joanpablo/reactive_forms/blob/fe8b030aad69420f1284ff2eff35acbbaf3ad642/lib/src/models/models.dart#L2093-L2112

unfortunately as far as I can tell, there is no way to distinguish between a FormControl<Map<String,Object?>> and a FormGroup, so the current way of updating the form is flawed.

I suggest we create and add the missing controls ourselves to the array before updating with the rawValue

[ahmednfwela]

I have created joanpablo/reactive_forms#477 which can be used here to completely avoid this bug