Angular Reactive Forms vs React Redux Form

1. Angular - Reactive Forms vs React - Redux Form Mirosław Bogacz 25.10.2018

2. Start with empty form www.briisk.co

3. How to start with empty form www.briisk.co <form [formGroup]="form"></form> contact-form.component.html // ... export class ContactFormComponent { public form: FormGroup; constructor(private formBuilder: FormBuilder) { this.form = this.formBuilder.group({}); } } contact-form.component.ts

7. How to start with empty form www.briisk.co const ContactForm = ({ handleSubmit }) => { <form onSubmit={handleSubmit} /> } export const ContactFormComponent = reduxForm({ name: 'contact' })(ContactForm); contact-form.component.jsx

10. Handle submitting data www.briisk.co

11. How to handle submitting data www.briisk.co <form [formGroup]="form" (submit)="handleSubmit()"></form> contact-form.component.html // ... export class ContactFormComponent { // ... public handleSubmit() { console.log(this.form.value); } // ... } contact-form.component.ts

12. How to handle submitting data www.briisk.co <form [formGroup]="form" (submit)="handleSubmit()"></form> contact-form.component.html // ... export class ContactFormComponent { // ... public handleSubmit() { console.log(this.form.value); } // ... } contact-form.component.ts

13. How to handle submitting data www.briisk.co function submit(values, props) { console.log(values, props); } const ContactForm = ({ handleSubmit }) => { <form onSubmit={handleSubmit} /> } export const ContactFormComponent = reduxForm({ name: 'contact', onSubmit: submit })(ContactForm); contact-form.component.jsx

17. Flat structure www.briisk.co

18. How to use basic structure www.briisk.co <input formControlName="name" /> <select [formControl]="form.get('colors')"> <option value="#ff0000">Red</option> </select> contact-form.component.html this.form = this.formBuilder.group({ name: [''], colors: [''] }); contact-form.component.ts

26. How to use basic structure www.briisk.co <Field name="name" component="input" type="text" /> <Field name="colors" component="select"> <option value="#ff0000">Red</option> </Field> contact-form.component.jsx

32. Structure of array www.briisk.co

33. How to use structure of array www.briisk.co <div formArrayName="questions"> <div *ngFor="let item of form.get('questions').controls; let i = index;"> <input [formControlName]="i" /> </div> </div> contact-form.component.html this.form = this.formBuilder.group({ questions: this.formBuilder.array([ new FormControl(''), ]) }); contact-form.component.ts

40. How to use structure of array www.briisk.co const QuestionsComponent = ({ fields }) => ( {fields.map((field, index) => ( <Field key={field + index} name={field} component="input" type="text" /> ))} ); const ContactForm = ({ handleSubmit }) => { <form onSubmit={handleSubmit}> <FieldArray name="questions" component={QuestionsComponent} /> </form> } contact-form.component.jsx

46. Structure of object www.briisk.co

47. How to use structure of object www.briisk.co <div formGroupName="question"> <input formControlName="title" /> <textarea formControlName="description"></textarea> </div> contact-form.component.html this.form = this.formBuilder.group({ question: this.formBuilder.group({ title: [''], description: [''], }) }); contact-form.component.ts

51. How to use structure of object www.briisk.co <FieldSection name="question"> <Field name="title" component="input" type="text" /> <Field name="description" component="textarea" /> </FieldSection> contact-form.component.jsx

54. Validation www.briisk.co

55. How to use validation www.briisk.co contact-form.component.ts this.form = this.formBuilder.group({ name: ['', [ Validators.required, Validators.maxLength(5) ]] }); function customValidation(control: AbstractControl) { return !control.value ? { required: 'field is required' } : null; }

63. How to use validation www.briisk.co contact-form.component.jsx function formValidation(values, props) { const errors = {}; if (!values.name) { errors.name = 'name is required' } return errors; } export const ContactFormComponent = reduxForm({ name: 'contact', validation: formValidation, })(ContactForm);

72. Display error messages www.briisk.co

73. How to display validation message www.briisk.co contact-form.component.html <input formControlName="name" /> <div class="error" *ngIf="form.get('name').hasError('required')"> {{ form.get('name').getError('required') }} </div>

77. How to display validation message www.briisk.co contact-form.component.jsx const Input = ({ input, type, meta: { error } }) => ( <React.Fragment> <input {...input} type={type} /> {error && <div className="error">{error}</div>} </React.Fragment> ); <Field type="text" component={Input} />

84. www.briisk.co Hope you enjoyed it! MIROSŁAW BOGACZ [email protected] GitHub: miroslaw-bogacz www.briisk.co

Angular Reactive Forms vs React Redux Form

More Related Content

What's hot (7)

Similar to Angular Reactive Forms vs React Redux Form (11)

Recently uploaded (20)

Angular Reactive Forms vs React Redux Form