Please fix & update the demo with proper validation

[trsh]

1. Only thing that changes is ng-invalid to ng-valid, but the css uses has-error, has-sucesss, where also by default everything is red, so it just doesn't work. It's a mess.

2. Can we have a button OK, that also triggers validation? Any hopes to see a validation error text? The colors are some-have not enough. User can't know the error from color. As I see no placeholder for err https://github.com/makinacorpus/ngx-schema-form/blob/master/projects/schema-form/src/lib/defaultwidgets/string/string.widget.ts I guess this means, DO your own widgets? :)

[WhileTrueEndWhile]

Only thing that changes is ng-invalid to ng-valid, but the css uses has-error, has-sucesss, where also by default everything is red, so it just doesn't work. It's a mess.

Accept that the behavior of has-error/has-success is unusual. Just look into the non-minified CSS of Bootstrap and copy the appropriate styles for your fields...

.form-control.ng-untouched,
.form-control.ng-valid {
    color: #495057 !important;
    border: 1px solid #ced4da !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
    /* ... */
}

See https://github.com/twbs/bootstrap/blob/v4-dev/dist/css/bootstrap.css#L1811 and following...

Can we have a button OK, that also triggers validation?

See .ng-untoched. Define styles that make unchecked fields look valid. For example, use "+" in CSS to hide your own error messages...

Any hopes to see a validation error text? The colors are some-have not enough. User can't know the error from color. As I see no placeholder for err https://github.com/makinacorpus/ngx-schema-form/blob/master/projects/schema-form/src/lib/defaultwidgets/string/string.widget.ts I guess this means, DO your own widgets? :)

See also:

• Show red border only on invalid fields
• It is possible create schema with array consists from objects with different type?
• Adding custom validation message
• Multi column form

[trsh]

@WhileTrueEndWhile but if I don't need custom validation message? Can I have one returned by valid. lib, that this lib uses and show under field?

[WhileTrueEndWhile]

Just use e.message within *ngFor="let e of (formProperty.errorsChanges | async)" ;-)