@vendasta/store/order-form/fields/README.md

Components and data for Store

# Fields

## va-field
This is the html selector you will always be using. It will determine the correct type of field to display based on what kind of FieldBase you give it.
Currently, there are five types of fields you can use:
- Textbox
- Textarea
- Checkbox
- Dropdown
- File Uploader

The general usage of all four types will be largely the same with only slight differences in the options passed into the FieldBase implementation.
Things you will need:
- A `FormGroup` instance. This connects the validators for all fields so the form can be validated as a whole.
- A `FieldBase` object or collection. Each of the above field types extend FieldBase so you can mix and match them as you please.

You can create the controls as follows:

```javascript
const group: any = {};
this.textBoxField = new TextboxField({id: 'ID1', label: 'this is a textbox', required: true,
  description: 'This is a description', textboxType: 'text'});
group[this.textBoxField.id] = this.createFormControl(this.textBoxField);

this.textAreaField = new TextareaField({id: 'ID2', label: 'this is a textarea', required: false,
  description: 'This is a description'});
group[this.textAreaField.id] = this.createFormControl(this.textAreaField);

this.checkBoxField = new CheckboxField({id: 'ID3', label: 'this is a checkbox', required: false,
  description: 'This is a description'});
group[this.checkBoxField.id] = this.createFormControl(this.checkBoxField);

this.dropdownField = new DropdownField({id: 'ID4', label: 'this is a dropdown', required: true,
  description: 'This is a description', options: [{value: '1', label: 'Option 1'}, {value: '2', label: 'Option 2'}]});
group[this.dropdownField.id] = this.createFormControl(this.dropdownField);

this.uploadField = new FileUploadGroupField({id: 'ID5', label: 'Upload something. Anything you want.', required: false,
  description: 'This is a description', fileType: 'image', uploadUrl: 'badurl.com', numFiles: 1});
group[this.uploadField.id] = this.fieldService.createFormControl(this.uploadField);

this.form = new FormGroup(group);
```

```html
<form [formGroup]="form">
  <va-field [field]="textBoxField" [form]="form"></va-field>
  <va-field [field]="textAreaField" [form]="form"></va-field>
  <va-field [field]="checkBoxField" [form]="form"></va-field>
  <va-field [field]="dropdownField" [form]="form"></va-field>
</form>
```

You'll notice that some of the fields take in extra parameters. Some field types have additional options that need to be set.

### Textbox
Additionally requires:
- `textboxType`: A string indicating what kind of textbox to show. Currently only accepts `'text'`.

### Textarea
Does not require any additional options at this time.

### Checkbox
Does not require any additional options at this time.

### Dropdown
Additionally requires:
- `options`: A collection of `Option` instances, which provide information about what options to display in the dropdown. The Option interface is:
 - `value`: A string representing the unique value of the option.
 - `label`: A string representing the label to be displayed for this option.

### File Uploader
Additionally requires:
- `uploadUrl`: The location of where to upload the given files. Note: in frontend run 'ng serve --env=test' to avoid needing a valid uploadUrl
- `numFiles`: The maximum number of files you are able to upload.