Forms: State that setErrors() will make status === INVALID regardless of value passed for key #21564
Description
I'm submitting a...
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report
[ ] Feature request
[x] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
Current behavior
In the setErrors example for AbstractControl it shows passing true for the key. The issue is that the control's status will be set to INVALID no matter the value of the key (or even just passing setErrors an empty object (see _calculateStatus code)
However, as the example is given, it's reasonable to infer that you clear the errors by setErrors( {"notUnique": false}), when really you'd need to do setErrors(null) or, as the example does show, set the control's value to a new value.
const login = new FormControl("someLogin");
login.setErrors({
"notUnique": true
});
expect(login.valid).toEqual(false);
expect(login.errors).toEqual({"notUnique": true});
login.setValue("someOtherLogin");
expect(login.valid).toEqual(true);
Expected behavior
Update documentation to explicitly say how to clear errors in code (as this is useful to know when doing integration (template) testing, where you just want to set an error, check the template, then clear the error and check that any alerts have gone away.
Minimal reproduction of the problem with instructions
Failing test
const login = new FormControl("someLogin");
login.setErrors({
"notUnique": true
});
expect(login.valid).toEqual(false);
expect(login.errors).toEqual({"notUnique": true});
login.setErrors({"notUnique": false});
expect(login.valid).toEqual(true); //will still be INVALID since the check: if(this.errors) will return TRUE
Suggested example
const login = new FormControl("someLogin");
login.setErrors({
"notUnique": true
});
expect(login.valid).toEqual(false);
expect(login.errors).toEqual({"notUnique": true});
login.setValue("someOtherLogin"); //or: login.setErrors(null); <===add this comment
expect(login.valid).toEqual(true);
Alternatively (though this would be code change, not just a documentation change), is that in _calculateStatus(), you only set to INVALID if at least one key in the errors object is set to true.
What is the motivation / use case for changing the behavior?
When I am doing integration (template) testing to validate that alert/error messages show up when a control is invalid, and I choose to use the setErrors() function to create an INVALID status, I want to know how to then create a VALID status (either by setting a valid value or by passing null to the control.setErrors() function.
Environment
Angular version: 4.4.1
Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
For Tooling issues:
- Node version: XX
- Platform:
Others: