Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ReactiveRawAutocomplete not setting correct displayValue when valueChanges #134

Closed
ThomasDevApps opened this issue Nov 2, 2023 · 1 comment · Fixed by #152
Closed

ReactiveRawAutocomplete not setting correct displayValue when valueChanges #134

ThomasDevApps opened this issue Nov 2, 2023 · 1 comment · Fixed by #152

Comments

@ThomasDevApps
Copy link

ThomasDevApps commented Nov 2, 2023

Hello, I have already read and checked #123

That's why I confirm that I'm using version 2.0.1

However I have a very similar problem:

I have a company field that is autocomplete thanks to an API, however the user can also fill in the name field and the siret field manually and therefore update the autocomplete field.

However, the displayStringForOption doesn't work here: instead of using the displayNameAndSiret method to display 'companyName (companySiret)', it displays Instance of '...'.

class CompanyModel {
  final String name;
  final String siret;
  const CompanyModel({required this.name, required this.siret});

  String displayNameAndSiret() => '$name ($siret)';
}

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final formGroup = fb.group({
    'company': [const CompanyModel(name: '', siret: ''), Validators.required],
    'name': ['', Validators.required],
    'siret': ['', Validators.required],
  });

  final List<CompanyModel> list = [
    const CompanyModel(name: 'name1', siret: '01'),
    const CompanyModel(name: 'name2', siret: '02'),
    const CompanyModel(name: 'name3', siret: '03'),
  ];

  @override
  void initState() {
    formGroup.control('company').valueChanges.listen((event) {
      formGroup.control('name').value = (event as CompanyModel).name;
      formGroup.control('siret').value = event.siret;
    });
    formGroup.control('name').valueChanges.listen((event) {
      formGroup.control('company').value = CompanyModel(
        name: event,
        siret: formGroup.control('siret').value,
      );
    });
    formGroup.control('siret').valueChanges.listen((event) {
      formGroup.control('company').value = CompanyModel(
        name: formGroup.control('name').value,
        siret: event,
      );
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ReactiveForm(
        formGroup: formGroup,
        child: SafeArea(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              ReactiveRawAutocomplete(
                formControlName: 'company',
                optionsBuilder: (textEditing) => list.where(
                  (element) => element.name == textEditing.text,
                ),
                displayStringForOption: (option) =>
                    option.displayNameAndSiret(),
                optionsViewBuilder: (context, onSelected, options) {
                  return Material(
                    elevation: 4,
                    child: ListView.builder(
                      shrinkWrap: true,
                      itemCount: options.length,
                      itemBuilder: (context, index) {
                        final option = options.elementAt(index);
                        return ListTile(
                          title: Text(option.displayNameAndSiret()),
                          onTap: () => onSelected(option),
                        );
                      },
                    ),
                  );
                },
              ),
              const SizedBox(height: 16),
              ReactiveTextField(
                formControlName: 'name',
                decoration: const InputDecoration(
                  hintText: 'Name',
                ),
              ),
              const SizedBox(height: 8),
              ReactiveTextField(
                formControlName: 'siret',
                decoration: const InputDecoration(
                  hintText: 'Siret',
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
Copy link

Hi @ThomasDevApps!
Your issue has been closed. If we were helpful don't forget to star the repo.

Please check our reactive_forms_generator package

We would appreciate sponsorship subscription or one time donation
https://github.com/sponsors/artflutter

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant