Using ForEach with a an array of Bindings (SwiftUI)

Question

My objective is to dynamically generate a form from JSON. I've got everything put together except for generating the FormField views (TextField based) with bindings to a dynamically generated list of view models.

If I swap out the FormField views for just normal Text views it works fine (see screenshot):

ForEach(viewModel.viewModels) { vm in
    Text(vm.placeholder)
}

for

ForEach(viewModel.viewModels) { vm in
     FormField(viewModel: $vm)
}

I've tried to make the viewModels property of ConfigurableFormViewModel an @State var, but it loses its codability. JSON > Binding<[FormFieldViewModel] naturally doesn't really work.

Here's the gist of my code:

Nicolas Yuste · Accepted Answer · 2019-12-13 10:05:28Z

The first thing that you can try is this:

ForEach(0 ..< numberOfItems) { index in
   HStack {
     TextField("PlaceHolder", text: Binding(
       get: { return items[index] },
       set: { (newValue) in return self.items[index] = newValue}
     ))
   }
}

The problem with the previous approach is that if numberOfItems is some how dynamic and could change because of an action of a Button for example, it is not going to work and it is going to throw the following error: ForEach<Range<Int>, Int, HStack<TextField<Text>>> count (3) != its initial count (0). 'ForEach(_:content:)' should only be used for *constant* data. Instead conform data to 'Identifiable' or use 'ForEach(_:id:content:)' and provide an explicit 'id'!

If you have that use case, you can do something like this, it will work even if the items are increasing or decreasing during the lifecycle of the SwiftView:

ForEach(items.indices, id:\.self ){ index in
   HStack {
     TextField("PlaceHolder", text: Binding(
       get: { return items[index] },
       set: { (newValue) in return self.items[index] = newValue}
     ))
   }
}

Thanks! I've been looking for this answer! You can also do self.$items[index] instead of creating a custom Binding.
Lifesaver - works like a charm. Thanks for the great answer!
Be aware: ForEach views only work with static content when you use the index values this way. If you change your content dynamically, you may experience errors.

aheze · Accepted Answer · 2021-06-09 04:53:16Z

15

Swift 5.5

From Swift 5.5 version, you can use binding array directly by passing in the bindable like this.

ForEach($viewModel.viewModels, id: \.self) { $vm in
     FormField(viewModel: $vm)
}

edited Jun 9, 2021 at 4:53

aheze

31.5k12 gold badges107 silver badges159 bronze badges

answered Jun 8, 2021 at 18:57

Raja Kishan

19.4k3 gold badges41 silver badges71 bronze badges

Comments

erdos · Accepted Answer · 2019-06-25 17:18:51Z

8

Trying a different approach. The FormField maintains it's own internal state and publishes (via completion) when its text is committed:

struct FormField : View {
    @State private var output: String = ""
    let viewModel: FormFieldViewModel
    var didUpdateText: (String) -> ()

    var body: some View {
        VStack {
            TextField($output, placeholder: Text(viewModel.placeholder), onCommit: {
                self.didUpdateText(self.output)
            })

            Line(color: Color.lightGray)
        }.padding()
    }
}

ForEach(viewModel.viewModels) { vm in
    FormField(viewModel: vm) { (output) in
        vm.output = output
    }
}

answered Jun 25, 2019 at 17:18

erdos

6721 gold badge6 silver badges15 bronze badges

3 Comments

Nicolas Yuste Over a year ago

I get a

Cannot invoke initializer for type 'TextField<_>' with an argument list of type '(Binding<String>, placeholder: Text, onCommit: @escaping () -> ())'

error while doing this. Is that only me?

erdos Over a year ago

@nicoyuste the signatures may be different now... this code is from one of the earlier releases

Nicolas Yuste Over a year ago

I added a new response on the thread with the code that works now.

Jake Cronin · Accepted Answer · 2020-03-30 19:00:25Z

6

A solution could be the following:

ForEach(viewModel.viewModels.indices, id: \.self) { idx in
     FormField(viewModel:  self.$viewModel.viewModels[idx])
}

edited Mar 30, 2020 at 19:00

Jake Cronin

1,07214 silver badges17 bronze badges

answered Oct 3, 2019 at 13:46

Lorenzo Fiamingo

4,1873 gold badges23 silver badges39 bronze badges

Comments

Michel Donais · Accepted Answer · 2020-10-18 16:03:03Z

Took some time to figure out a solution to this puzzle. IMHO, it's a major omission, especially with SwiftUI Apps proposing documents that has models in struct and using Binding to detect changes.

It's not cute, and it takes a lot of CPU time, so I would not use this for large arrays, but this actually has the intended result, and, unless someone points out an error, it follows the intent of the ForEach limitation, which is to only reuse if the Identifiable element is identical.

ForEach(viewModel.viewModels) { vm in
    ViewBuilder.buildBlock(viewModel.viewModels.firstIndex(of: zone) == nil
        ? ViewBuilder.buildEither(first: Spacer())
        : ViewBuilder.buildEither(second: FormField(viewModel: $viewModel.viewModels[viewModel.viewModels.firstIndex(of: vm)!])))
}

For reference, the ViewBuilder.buildBlock idiom can be done in the root of the body element, but if you prefer, you can put this with an if.

Collectives™ on Stack Overflow

Using ForEach with a an array of Bindings (SwiftUI)

5 Answers 5

3 Comments

Swift 5.5

Comments

3 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Swift 5.5

Comments

3 Comments

Comments

Comments

Linked

Related