How do I create a certain number of TextFields based on User Input?

Question

I want to create a certain amount of TextFields on a view based on the number the user inputs. For Example, if the user inputs 5 I would like to display 5 TextFields on the view. I was thinking about using "Form" with a "For Each," but I cant figure out the correct syntax or if it's possible at all. This is my code so far:

struct NameView: View{
    @Binding var numNames: String
    @State private var newSet = []
    var body: some View{
        var numNameInt = Int(numNames)
        Form{
            ForEach(newSet) { index in
                TextField("Name", text: $newSet[index])
            }
        }
    }

Any help would be appreciated.

workingdog support Ukraine · Accepted Answer · 2022-08-20 03:07:46Z

1

you could try something like this, ...to create a certain amount of TextFields on a view based on the number the user inputs. ...:

struct ContentView: View {
    @State private var txtfields: [String] = [] // <-- the textfields text values
    @State private var number = 0  // <-- user input number
    
    var body: some View {
        VStack {
            // enter a number here
            TextField("number", value: $number, format: .number).border(.green)
                .onSubmit {
                    if number <= 5 {   // max 5
                        txtfields = Array(repeating: "", count: number)
                    }
                }
            // the list of TextFields 
            List {
                ForEach(txtfields.indices, id: \.self) { index in
                    TextField("text", text: $txtfields[index]).border(.red)
                }
            }
        }
    }
}

edited Aug 20, 2022 at 3:07

answered Aug 20, 2022 at 1:25

workingdog support Ukraine

38.9k5 gold badges47 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Stoic · Accepted Answer · 2022-08-19 19:25:31Z

0

The only limitation to the following approach is that you need to know the maximum number of names someone is able to have. This makes sense, because you wouldn't want someone to make infinite names and crash your app, but unless there's a way to dynamically create bindable variables, you have to have a limit of how many names they might have.

The example below accounts for a limit of 3 names, hence the name1, name2, and name3 variables

struct NameView: View {
    
    @State var numNames: String = ""
    
    @State var name1: String = ""
    @State var name2: String = ""
    @State var name3: String = ""
    
    @State var nameArray: [String] = []
    
    
    var body: some View {
        VStack {
            TextField(text: $numNames) {}   //Accepts the number of names they have
                
            
            if let num = Int(numNames) {    //If they input an int...
                ForEach(0..<num, id: \.self) { n in     // then iterate for each one
                    TextField(text: $nameArray[n]) {}   //and make a textfield to the corresponding variable
                }
            }
        }
        .onAppear {
            self.nameArray = [name1, name2, name3]
        }
    }
}

Later on, you could turn the array into an array of only the names that they actually have by doing nameArray = nameArray.filter { $0 != "" }

answered Aug 19, 2022 at 19:25

Stoic

1,2692 gold badges16 silver badges36 bronze badges

2 Comments

ppraveen Over a year ago

where would i put nameArray = nameArray.filter { $0 != "" }. I dont think i could put it after the code above because then it wouldn't conform to the "View Properties."

Stoic Over a year ago

Depends. You could make some kind of function to get all of the names, and return that line in the function. You could also make a computed property, and put that in the body.

Collectives™ on Stack Overflow

How do I create a certain number of TextFields based on User Input?

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related