How to show errors in settingsApp on TextInput?

[Yobikap]

Hi all,

I have a settingsApp which I am developing and I have created a login page.

I am looking for a solution how I can do some error management and show it to the user:

1. I want to add a pattern to check if the email entered is passing, otherwise I want to show an error below the field
2. If there is an error coming from our restApi, how can I integrate this and show the error to the user?
3. When entered the value from User Input, I want to replace the placeholder with user input in TextInput, how can I do this?

Here is an sample code which I have written for the Setting App:

export default (props, data) => View({
    style: {
        width: "100%",
        height: "100%",
        padding: "23px",
        background: "#FFFFFF"
    }
},[
    Button({
        id: 'back',
        label: 'Back',
        style: {
            padding: '15px',
            paddingTop: '11px',
            paddingBottom: '11px',
            marginLeft: '20px',
            marginTop: '15px',
            border: '1px solid #E8ECF4',
            borderRadius: '12px',
            boxShadow: 'none',
            backgroundColor: '#FFFFFF'
        },
        onClick: () => {
            props.settingsStorage.setItem('page', 'start')
        }
    }),
    TextInput({
        id: 'email',
        label: "Enter your email",
        placeholder: 'Enter your email',
        labelStyle: {
            marginTop: '150px',
            height: '56px',
            width: '100%',
            fontSize: '14px',
            borderRadius: '8px',
            padding: '18px',
            background: '#F7F8F9',
            color: '#8391A1',
            border: '1px solid #DADADA',
        }
    }),
    TextInput({
        id: 'password',
        label: "Enter your password",
        placeholder: "Enter your password",
        type: "password",
        labelStyle: {
            marginTop: '15px',
            height: '56px',
            width: '100%',
            fontSize: '14px',
            borderRadius: '8px',
            padding: '18px',
            background: '#F7F8F9',
            color: '#8391A1',
            border: '1px solid #DADADA'
        }
    }),
    Link({
        id: 'forgot-password-link',
        source: "https://login"
    }, [
        Text({
            id: 'forgot-password-text',
            style: {
                marginTop: '5px',
                width: '100%',
                display: 'block',
                textAlign: 'right',
                fontSize: '14px',
                color: '#6A707C'
            }
    }, "Forgot password?")]),
    Button({
        id: 'login',
        label: "Login",
        style: {
            marginTop: '50px',
            height: '56px',
            width: '100%',
            fontSize: '14px',
            borderRadius: '8px',
            background: '#000000',
            color: 'white'
        },
        onClick: () => {
            // 5. Modify the data in settingsStorage in the callback function of the event
            console.log(this);
            props.settingsStorage.setItem('page', 'login')
        }
    })
])

[MyoungXUE]

@Yobikap yo
Hello, I'm sorry, the Settings App cannot currently do this. This is a very good suggestion, and we will find a way to support this feature in future updates.