Welcome to part 1 of our series on building and maintaining form views and contexts! In this series, we’ll explore keeping track of control values, submitting forms from both inside and outside of it, and validating control values when submitted. Part 1 will focus on fundamentals of the concept of form context and how to build a form view with form controls that allow real-time updates and submission.
First things first, we need to create the FormContext type that holds a dictionary of form key-value pairs with functions to set and get values:
struct FormContext {
private(set) public var dataFields: [String: AnyHashable?]
init(dataFields: [String : AnyHashable?] = [:]) {
self.dataFields = dataFields
}
mutating func set<T: Hashable>(_ value: T?, for key: String?) {
guard let key else { return }
if let value {
dataFields[key] = value
} else {
dataFields.removeValue(forKey: key)
}
}
func get<T: Hashable>(_ key: String?, type: T.Type) -> T? {
guard let key, let value = dataFields[key] else { return nil }
return value as? T
}
}Next, we need to have a way to pass the form context from the form view to its form controls. This can be done via EnvironmentObject. To achieve this, we create a new type called FormContextObject, which is an ObservableObject and holds an instance of FormContext which publishes its changes so that all form controls will have access to the latest version of this context:
class FormContextObject: ObservableObject {
@Published private(set) var context: FormContext?
init(context: FormContext?) {
self.context = context
}
func set<T: Hashable>(_ value: T?, for key: String?) {
context?.set(value, for: key)
}
}Then, we need to have a way of adding the FormContextObject to the view as an environment object. Accessing an environment object if it is not set can cause errors, therefore we need to accompany it with an environment variable that specifies if the object has been set. To do this, we can introduce an environment boolean variable called isInFormContext and set it to true with the FormContextObject:
extension View {
@ViewBuilder
func formContextObject(_ object: FormContextObject) -> some View {
modifier(FormContextObjectViewModifier(formContextObject: object))
}
}
private struct FormContextObjectViewModifier: ViewModifier {
@StateObject private var formContextObject: FormContextObject
init(formContextObject: FormContextObject) {
self._formContextObject = .init(wrappedValue: formContextObject)
}
func body(content: Content) -> some View {
content
.environment(\.isInFormContext, true)
.environmentObject(formContextObject)
}
}
extension EnvironmentValues {
var isInFormContext: Bool {
get { self[IsInFormContextKey.self] }
set { self[IsInFormContextKey.self] = newValue }
}
}
private struct IsInFormContextKey: EnvironmentKey {
static let defaultValue = false
}Finally, we can create the FormView which initialises and adds the FormContextObject to its content:
struct FormView<Content: View>: View {
private let formContextObject: FormContextObject
private let content: Content
init(formContext: FormContext = .init(), @ViewBuilder content: () -> Content) {
self.formContextObject = .init(context: formContext)
self.content = content()
}
var body: some View {
content
.formContextObject(formContextObject)
}
}Now that we have the form in place, we can focus on building and wiring up form controls to the form context. The first step is to create the concept of FormControl:
// 1
protocol FormControl: ObservableObject {
var formKey: String? { get }
var formValue: AnyHashable? { get }
}
// 2
final class NilFormControl: FormControl {
var formKey: String? { nil }
var formValue: AnyHashable? { nil }
}1. A FormControl is usually the view model of the form component’s view which manages the form value and real-time updates.
2. NilFormControl is an instance of FormControl that can be used as the default.
Secondly, we’ll need to wire up the the form control to the form context so that its value updates will be stored in the context in real time. To achieve this, we can create a view modifier that will be used on form control views:
extension View {
@ViewBuilder
func formContext<FormControlObject: FormControl>(formControl: FormControlObject = NilFormControl(), closure: ((FormContextObject) -> Void)?) -> some View {
modifier(FormContextViewModifier(formControl: formControl, closure: closure))
}
}
private struct FormContextViewModifier<FormControlObject: FormControl>: ViewModifier {
@Environment(\.isInFormContext)
private var isInFormContext
@EnvironmentObject private var formContextObject: FormContextObject
@ObservedObject var formControl: FormControlObject
var closure: ((FormContextObject) -> Void)?
func body(content: Content) -> some View {
if isInFormContext {
content
.onAppear {
closure?(formContextObject)
}
.onChange(of: formControl.formValue) {
formContextObject.set($0, for: formControl.formKey)
}
} else {
content
}
}
}In the provided code snippet, we’ve introduced a new view modifier named formContext. This modifier is applied to a form control component and is responsible for monitoring its value changes. With each change, the form context is updated accordingly. Additionally, this modifier accepts a closure parameter that is invoked on the view’s appearance. Within this closure, the formContextObject is passed, enabling its utilisation for various purposes, which we’ll discuss about in subsequent articles.
That’s it. We now have a form view with a form context and a way to connect different controls to it. Next, let’s build a form control that is a text field and connect it to the form context if exists:
struct TextFieldView: View {
@StateObject private var viewModel: TextFieldViewModel
init(id: String, title:String) {
self._viewModel = .init(wrappedValue: .init(id: id, title: title))
}
var body: some View {
TextField(viewModel.title, text: $viewModel.text)
.textFieldStyle(.roundedBorder)
.formContext(formControl: viewModel, closure: { _ in })
}
}
class TextFieldViewModel: ObservableObject, FormControl {
let id: String
let title: String
@Published var text: String
init(id: String, title:String, text: String = "") {
self.id = id
self.title = title
self.text = text
}
var formKey: String? { id }
var formValue: AnyHashable? { text }
}Then, we need to create a button component that reads and prints out the content of the form context as below:
struct SubmitButtonView: View {
@State private var formContextObject: FormContextObject?
var body: some View {
Button("Submit", action: {
if let dataFields = formContextObject?.context?.dataFields {
dataFields.keys.sorted().forEach {
if let value = dataFields[$0]??.description {
print("\($0): \(value)")
}
}
print("==========")
}
code-snippet
})
.formContext(closure: { formContextObject = $0 })
}
}And finally, we can create a form view with text components and a submit button:
struct ContentView: View {
var body: some View {
FormView {
VStack {
TextFieldView(id: "firstname", title: "First Name")
TextFieldView(id: "lastname", title: "Last Name")
SubmitButtonView()
}
}
.padding()
}
}Filling up the text fields and hitting the submit button will produce:
firstname: Hello
lastname: World
==========In conclusion, we’ve covered the creation of a form context, integrating form controls for seamless updates, and leveraging the context data for actions like network calls. With these insights, you’re equipped to handle form management efficiently.
In next tutorials, I will explain:
1. How we can trigger form submissions from outside of the form context.
2. How we can implement form control input validation and print error messages if any of the validations fail.
2 thoughts on “Building a Form in SwiftUI – Part 1 – Form Context”