All form components have an invalid state style to display the validation errors.
+
+
+<div class="p-fluid p-grid">
+ <div class="p-field p-col-12 p-md-4">
+ <InputText id="inputtext" type="text" v-model="value1" placeholder="InputText" class="p-invalid" />
+ </div>
+ <div class="p-field p-col-12 p-md-4">
+ <AutoComplete v-model="value2" :suggestions="filteredCountries" multiple @complete="searchCountry($event)" field="name" placeholder="AutoComplete" class="p-invalid" />
+ </div>
+ <div class="p-field p-col-12 p-md-4">
+ <Calendar id="calendar" v-model="value3" placeholder="Calendar" class="p-invalid" :showIcon="true" />
+ </div>
+ <div class="p-field p-col-12 p-md-4">
+ <Chips id="chips" v-model="value4" placeholder="Chips" class="p-invalid" />
+ </div>
+ <div class="p-field p-col-12 p-md-4">
+ <InputMask id="inputmask" v-model="value5" mask="99/99/9999" slotChar="mm/dd/yyyy" placeholder="InputMask" class="p-invalid" />
+ </div>
+ <div class="p-field p-col-12 p-md-4">
+ <InputNumber id="inputnumber" v-model="value6" placeholder="InputNumber" class="p-invalid" />
+ </div>
+ <div class="p-field p-col-12 p-md-4">
+ <Dropdown id="dropdown" v-model="value7" :options="cities" optionLabel="name" placeholder="Dropdown" class="p-invalid" />
+ </div>
+ <div class="p-field p-col-12 p-md-4">
+ <MultiSelect id="multiselect" v-model="value8" :options="cities" optionLabel="name" placeholder="MultiSelect" class="p-invalid" />
+ </div>
+ <div class="p-field p-col-12 p-md-4">
+ <Textarea id="textarea" v-model="value9" rows="3" placeholder="Textarea" class="p-invalid" />
+ </div>
+</div>
+
+
+
+
+
+import CountryService from '../../service/CountryService';
+
+export default {
+ data() {
+ return {
+ countries: null,
+ filteredCountries: null,
+ cities: [
+ {name: 'New York', code: 'NY'},
+ {name: 'Rome', code: 'RM'},
+ {name: 'London', code: 'LDN'},
+ {name: 'Istanbul', code: 'IST'},
+ {name: 'Paris', code: 'PRS'}
+ ],
+ value1: null,
+ value2: null,
+ value3: null,
+ value4: null,
+ value5: null,
+ value6: null,
+ value7: null,
+ value8: null,
+ value9: null
+ }
+ },
+ countryService: null,
+ created() {
+ this.countryService = new CountryService();
+ },
+ mounted() {
+ this.countryService.getCountries().then(data => this.countries = data);
+ },
+ methods: {
+ searchCountry(event) {
+ setTimeout(() => {
+ if (!event.query.trim().length) {
+ this.filteredCountries = [...this.countries];
+ }
+ else {
+ this.filteredCountries = this.countries.filter((country) => {
+ return country.name.toLowerCase().startsWith(event.query.toLowerCase());
+ });
+ }
+ }, 250);
+ }
+ },
+}
+
+
+