如何讓 SwiftUI TextField 顯示數字但也接受空值

Question

我正在嘗試獲取一個僅接受數字但也接受空值的文本字段（即它是一個可選字段）。 這是文本字段的樣子：

TextField("Phone Number", value: $phoneNumber, formatter: numberFormatter)
    .disableAutocorrection(true)
    .autocapitalization(.none)

我的數字格式化程序如下所示：

@State private var numberFormatter: NumberFormatter = {
    var nf = NumberFormatter()
    nf.numberStyle = .none
    nf.zeroSymbol = ""    
    return nf
}()

我嘗試了兩種不同的解決方案，但都有問題。 第一個解決方案是將phoneNumber定義為可選整數Int? 以便TextField將接受空白輸入：

@State var phoneNumber: Int? = nil

但是，這與TextField混淆了，因此當我通過應用程序更改其值時，更改不會更新實際變量phoneNumber 。 所以，當我去發送我的數據時， phoneNumber仍然保持在nil 。 我認為這與numberFormatter以及它如何不接受nil變量有關。

所以，我的第二個解決方案是將phoneNumber初始化為Int ，如下所示：

@State var phoneNumber: Int = 0

當我更改TextField中的文本時，此解決方案會更新phoneNumber 。 但是，當我輸入 0 時，它只會在TextField框中顯示一個空格（因為我在.zeroSymbol中定義了numberFormatter ）。 當我嘗試只放置一個空格（即刪除所有文本）然后單擊TextField時，它只是恢復為之前的數字。 當我在字段中輸入一個非數字條目時也會發生同樣的事情，我可以接受，因為它應該只接受數字，但我仍然希望允許用戶包含一個空白條目。

我正在使用 XCode 並創建一個 iOS 應用程序。 感謝您的任何幫助。

Answer 1

一種可能的解決方案是通過代理綁定攔截輸入/輸出，並執行所需的額外驗證/處理。

使用 Xcode 13.3 / iOS 15.4 測試

這是主要部分：

TextField("Phone Number", value: Binding(
    get: { phoneNumber ?? 0},
    set: { phoneNumber = phoneNumber == $0 ? nil : $0 }
    ), formatter: numberFormatter)

項目中完整的測試模塊

Answer 2

我發現的另一個解決方案是將phoneNumber設為默認為""的字符串。 然后，嘗試通過Int(phoneNumber)將其轉換為Int來驗證它。 如果Int(phoneNumber) == nil ，則引發錯誤。 否則，您現在有一個新的可選整數，可以是 nil 或提供的整數：

var intPhoneNumber: Int?
        if phoneNumber == "" {
            intPhoneNumber = nil
        } else {
            intPhoneNumber = Int(phoneNumber)
            if intPhoneNumber == nil {
                completion(.failure(.custom(errorMessage: "Please enter a valid phone number. Try again.")))
                return
            } else if intPhoneNumber! < 0 {
                completion(.failure(.custom(errorMessage: "Invalid Phone Number. Please enter a valid 10 digit phone number.")))
                return
            } else if numberOfDigits(in: intPhoneNumber!) != 10 {
                completion(.failure(.custom(errorMessage: "Invalid Phone Number. Please enter a valid 10 digit phone number.")))
                return
            }
        }