0

How can I show a form in EditMode and PresentationMode Environment?

Example:

When user tap on EditButton, it should show Form in EditMode, with text files as input, and changes Navigation Title

import SwiftUI

struct FormView: View {

    var body: some View {

        NavigationView {


        Form {


            Text("Placeholder")

            // On EditMode it should show this
            // TextField("Placeholder", text: Value)

           }

        .navigationBarTitle("Presentation Mode")
        // On EditMode it should show this
        // .navigationBarTitle("Edit Mode")

        .navigationBarItems(trailing: EditButton())






 }


    }
}

struct FormView_Previews: PreviewProvider {
    static var previews: some View {

        FormView()
    }
}

enter image description here

Mane Manero
  • 3,086
  • 5
  • 25
  • 47

2 Answers2

5

In this case, when using editMode environment variable, for some reason EditButton() doesn't work on its own. Whereas, the editMode is toggled correctly when a custom button is used.

Interestingly, if the EditButton() is added along with the custom button (for testing purposes), after the custom button is used to toggle the value at least once, the EditButton() also springs to life and provides the expected behavior.

The following code snippet works fine for me:

import SwiftUI

struct TempView2: View {
    @Environment(\.editMode) var editMode

    @State var textValue : String = "abc"

    var body: some View {
        NavigationView {
            Form {
                TextField("Placeholder", text: $textValue)
                    .disabled(.inactive == self.editMode?.wrappedValue)
                    .textFieldStyle(RoundedBorderTextFieldStyle())
                    .foregroundColor((.active == self.editMode?.wrappedValue) ? Color.red : Color.green)
                    .navigationBarTitle(.inactive == self.editMode?.wrappedValue ? "Presentation Mode" : "Edit Mode")
                    .navigationBarItems(trailing:
                        HStack {
                            //Spacer()
                            //EditButton()
                            Spacer()
                            Button(action: {
                                self.editMode?.wrappedValue = .active == self.editMode?.wrappedValue ? .inactive : .active
                            }) {
                                Text(.active == self.editMode?.wrappedValue ? "Done" : "Edit")
                            }
                            Spacer()
                    })
            }
        }
    }
}
ddelver
  • 456
  • 3
  • 9
  • 1
    Found that wrapping the custom edit button's action in: withAnimation { } it restores the animation from the default button. – Deddiekoel Jun 15 '22 at 15:31
0

That is one way of achieving an editable form:

struct FormView: View {

    @State private var isEditing = false
    @State private var text = ""

    var body: some View {
        NavigationView {
            Form {
                TextField("Placeholder",
                          text: $text)
                    .disabled(!isEditing)
            }
            .navigationBarTitle(isEditing ? "Edit Mode" : "Presentation Mode")
            .navigationBarItems(trailing: Button(isEditing ? "Save" : "Edit") {
                self.isEditing.toggle()
            })
        }
    }
}
LuLuGaGa
  • 13,089
  • 6
  • 49
  • 57