I'm Kuldeep
/@bietkul
Controlled Components
Where form data is handled by React Component
Uncontrolled Components
Where form data is handled by the DOM
"Use React for ephemeral state that doesn’t matter to the app globally and doesn’t mutate in complex ways. For example, a toggle in some UI element, a form input state. Use Redux for state that matters globally or is mutated in complex ways. For example, cached users, or a post draft."
- Dan Abramov
React Reactive Forms
How it works ?
this.myForm = FormBuilder.group({
username: ["", Validators.required],
password: ["", Validators.required]
},
{
updateOn: "submit"
})
<FieldGroup
control={this.myForm}
render={() => (
<form>
<FieldControl
name="username"
render={({ handler, hasError }) => (
<div>
<input type="text" {...handler()}/>
<span>
{hasError("required") && "Please enter username"}
</span>
</div>
)}
/>
<FieldControl
name="password"
render={({ handler, hasError }) => (
<div>
<input type="password" {...handler()}/>
<span>
{hasError("required") && "Please enter password"}
</span>
</div>
)}
/>
</form>
)}
/>
<FieldGroup
render={() => (
<form>
<FieldControl
name="username"
render={({ handler, hasError }) => (
<div>
<input type="text" {...handler()}/>
<span>
{hasError("required") && "Please enter username"}
</span>
</div>
)}
/>
<FieldControl
name="password"
render={({ handler, hasError }) => (
<div>
<input type="password" {...handler()}/>
<span>
{hasError("required") && "Please enter password"}
</span>
</div>
)}
/>
</form>
)}
/>
componentDidMount() {
this.myForm.get('username').valueChanges.subscribe((value) => {
const passwordControl = this.myForm.get('password')
if(value) {
passwordControl.disable()
// this.myForm.disable()
// passwordControl.setValue("demo")
// passwordControl.setValidators(Validators.required)
// passwordControl.setErrors({ "isExist": true })
}
})
}