将值输入到 edittext 后出现 TextInputLayout 错误

TextInputLayout error after enter value into edittext

如何在 EditText 中输入一个文本后隐藏 TextInputLayout 错误。 可能吗?

我怎样才能做到这一点,或者我在这里做错了。!!

代码

    layoutEdtPhone =(TextInputLayout)rootView.findViewById(R.id.layoutEdtPhone);
    layoutEdtPhone.setErrorEnabled(true);
    layoutEdtPhone.setError(getString(R.string.ui_no_phone_toast));
    layoutEdtPassword =   (TextInputLayout)rootView.findViewById(R.id.layoutEdtPassword);
    layoutEdtPassword.setErrorEnabled(true);
    layoutEdtPassword.setError(getString(R.string.ui_no_password_toast));

    edtPhone=(EditText)rootView.findViewById(R.id.edtPhone);
    edtPassword=(EditText)rootView.findViewById(R.id.edtPassword);

xml

            <EditText
                android:id="@+id/edtPhone"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="100dp"
                android:background="@drawable/edt_background_selector"
                android:drawableLeft="@drawable/phone_icon"
                android:drawableStart="@drawable/phone_icon"
                android:hint="@string/phone"
                android:inputType="phone"
                android:padding="5dip"
                android:singleLine="true"
                android:textSize="14sp" />
        </android.support.design.widget.TextInputLayout>

        <android.support.design.widget.TextInputLayout
            android:id="@+id/layoutEdtPassword"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >

            <EditText
                android:id="@+id/edtPassword"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:background="@drawable/edt_background_selector"
                android:drawableLeft="@drawable/password_icon"
                android:drawableStart="@drawable/password_icon"
                android:hint="@string/password"
                android:inputType="textPassword"
                android:padding="5dip"
                android:singleLine="true"
                android:textSize="14sp" />
        </android.support.design.widget.TextInputLayout>

可以设置layoutEdtPhone.setErrorEnabled(false);

这里使用textwatcher link http://www.learn2crack.com/2014/02/android-textwatcher-example.html

为了进一步说明 Prithviraj 给出的答案,TextInputLayout 本身不进行验证。它只是一种显示错误或提示的机制。您对 setting/clearing 错误负责。这是你如何做到这一点。请注意,除了TextChangedListener之外,您可能还需要OnFocusChangeListener来设置当用户跳转到第二个编辑文本而不对第一个字段进行任何修改时的错误。

protected void onCreate(Bundle savedInstanceState) {
        //.....

        edtPhone.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {

            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {

            }

            @Override
            public void afterTextChanged(Editable s) {
                validateEditText(s);
            }
        });

        edtPhone.setOnFocusChangeListener(new View.OnFocusChangeListener() {
            @Override
            public void onFocusChange(View v, boolean hasFocus) {
                if (!hasFocus) {
                    validateEditText(((EditText) v).getText());
                }
            }
        });
    }

    private void validateEditText(Editable s) {
        if (!TextUtils.isEmpty(s)) {
            layoutEdtPhone.setError(null);
        }
        else{
            layoutEdtPhone.setError(getString(R.string.ui_no_password_toast));
        }
    }
}

使用if else条件,如果条件为真则设置TextInoutLayoutObj.setError(null);如果它是 false 在那里设置你的错误

textInputLatout.getEditText().addTextChangedListener(new TextWatcher() {
        @Override
        public void beforeTextChanged(CharSequence s, int start, int count, int after) {

        }

        @Override
        public void onTextChanged(CharSequence s, int start, int before, int count) {
            if (s.length() < 1) {
               textInputLayout.setErrorEnabled(true);
                textInputLayout.setError("Please enter a value");
            }

            if (s.length() > 0) {
                textInputLayout.setError(null);
                textInputLayout.setErrorEnabled(false);
            }

        }

        @Override
        public void afterTextChanged(Editable s) {

        }
    });

我使用了 ButterKnife 的 @TextChanged 并为我工作,看:

@Bind(R.id.layoutEdtPhone)
TextInputLayout tlayoutEdtPhone;
@Bind(R.id.edtPhone)
EditText edtPhone;

//start ButterKnife (I spent the URL with full description for initilize)

@OnTextChanged(R.id.edtPhone)
public void changedTextOnEditPhone() {
    tlayoutEdtPhone.setError("");
}

如果你想了解 ButterKnife,我写了一个 post 更详细,但它是用我的母语完成的,即 pt_br。 http://blog.alura.com.br/aumentando-a-produtividade-com-butter-knife-no-android/

mTextInputLayout.setError(null);

清除错误信息。

一个好的做法可以是检查错误的方法,如下所示:

@Override
public void checkErrorBeforeAction() {

    boolean error = false;

    mTextInputLayout.setError(null);

    if (mEditText.getText().toString().length == 0)) {
        mTextInputLayout.setError("Field empty");
    }
    else if (mEditText.getText().toString().isValid) { // Other condition
        mTextInputLayout.setError("Field is invalid");
    }
    if (!error) {
        // Call action
    }
}

这样它会在设置新错误消息之前刷新错误消息。

如果您想从 TextInputLayout 中删除错误显示,请使用:-

YourtextInputLayout.setErrorEnabled(false);

其他 如果您想从 edittextfield 中删除错误显示,请使用:-

edittext_id.setError(null);

我建议在 Android 中使用 Textwatcher 函数以进行更有效的验证处理..

例如:

editText.addTextChangedListener(new TextWatcher() { 
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {

            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {

            }

            @Override
            public void afterTextChanged(Editable s) {
                if (!validatefName()) {
                    return;
                }
            }
        });

遗憾的是,没有实现此行为的内置机制。我创建了 ViewUtils class 对我有帮助:

public final class ViewUtils {
    private ViewUtils() {}

    public static void resetTextInputErrorsOnTextChanged(TextInputLayout... textInputLayouts) {
        for (final TextInputLayout inputLayout : textInputLayouts) {
            EditText editText = inputLayout.getEditText();
            if(editText != null) {
                editText.addTextChangedListener(new TextWatcher() {
                    @Override
                    public void beforeTextChanged(final CharSequence s, final int start, final int count, final int after) {

                    }

                    @Override
                    public void onTextChanged(final CharSequence s, final int start, final int before, final int count) {

                    }

                    @Override
                    public void afterTextChanged(final Editable s) {
                        if(inputLayout.getError() != null) inputLayout.setError(null);
                    }
                });
            }
        }
    }
}

然后你就可以在客户端代码中轻松使用它了:

ViewUtils.resetTextInputErrorsOnTextChanged(mEmailTextInputLayout, mPasswordTextInputLayout);

这就是我使用扩展 TextInputLayout 的自定义 class 完成的方法。像其他答案一样使用 TextWatcher,但在 xml 中使用它后无需手动执行任何操作。它会为您处理一切。

public class CustomTextInputLayout extends TextInputLayout {
public CustomTextInputLayout(Context context) {
    super(context);
}

public CustomTextInputLayout(Context context, AttributeSet attrs) {
    super(context, attrs);
}

public CustomTextInputLayout(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
}

@Override
protected void onFinishInflate() {
    super.onFinishInflate();
    initRemoveErrorWatcher();
}

private void initRemoveErrorWatcher() {
    EditText editText = getEditText();
    if (editText != null) {
        editText.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {

            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
                setError(null);
            }

            @Override
            public void afterTextChanged(Editable s) {

            }
        });
    }
}
}

要使用,只需将 xml 中的 TextInputLayout 替换为:

<com.example.customViews.CustomTextInputLayout>...

使用 KTX:

textInputLayout.editText?.doOnTextChanged { text, start, count, after ->
    if (text?.any(invalidCharacters.toCharArray()::contains) == true) {
      textInputLayout.error = "Invalid character entered: ${invalidCharacters}"
    } else {
      textInputLayout.error = null
    }
  }