passwordForm.confirm.$state.errors(); // []

const passwordSchema: Schema<ConfirmedPassword> = (path: FieldPath<ConfirmedPassword>) => {

// Add validation on the `confirm` field that considers both the

// `password` and `confirm` values.

// Compare the password and confirm values, return an error if they don't match.

if (password !== value()) {

return {kind: 'non-matching', message: 'Password and confirm must match'};

passwordForm.confirm.$state.errors(); // [{kind: 'non-matching', message: 'Password and confirm must match'}]

apply(tripPath.end, dateSchema);

// More trip-specific date logic, will be merged with standard date logic above.

}, 'Trip must end after it starts');

};

1. **`field`**: The `Field` instance to submit. This can be the root field or any sub-field node.

2. **`action`**: An asynchronous function that performs the submission action. It receives the `field` being submitted as an argument and returns a `Promise`.

All `FieldState` objects have a `submittedStatus` signal that indicates their current submit state. The status can be `'unsubmitted'`, `'submitting'`, or `'submitted'`. There is no status to indicate that the submit errored because errors are reported through the `errors()` state the same way as client validation errors. (This is discussed more in the next section). `FieldState` objects also have a `resetSubmittedStatus()` method which sets the `submittedStatus` back to `'unsubmitted'`.

It can also integrate with custom form components (including those from libraries like Angular Material - e.g., `<mat-select>`, `<mat-radio>`) provided they correctly implement Angular's `ControlValueAccessor` interface. This is the standard mechanism in Angular for components to participate in forms.

```

@Component({/*...*/})

export class FeedbackComponent {

confirmationPassword: '',

feedback: '',

recommendToFriends: false,

friends: [],

});

}

form,

FieldDirective,

} from 'google3/experimental/angularsignalforms';

@Component({/*...*/

imports: [

Now let's write a custom validator to ensure that the password and confirmation password match.

required(path.password);

required(path.confirmationPassword);

? undefined

: {kind: 'confirmationPassword'};

});

export function confirmationPasswordValidator(

path: FieldPath<{password: string}>,

): Validator<string> {

? undefined

: {kind: 'confirmationPassword'};

};

This is unrelated to Forms.

/* ... */

readonly form = form(this.data, (path) => {

/* ... */

});

// When a field is disabled, validation doesn't run

import {

Schema,

required,

validate,

} from 'google3/experimental/angularsignalforms';

export const emailValidator: Validator<string> =

({value}) => {

};

Now we can use it in the schema (don't forget to use in feedback component as well).

import {

Schema,

required,

validate,

} from 'google3/experimental/angularsignalforms';

import {emailValidator} from './validators';

export const friendSchema: Schema<Friend> = (friend) => {

required(friend.name);

required(friend.email);

@Component({

<app-friend [friend]="friend"></app-friend>

}

}

The current setup works, but there's a small issue.

If we create a friend with an error, and then hide it, the validation would still run, and the form would be marked as invalid.

import {

applyEach,

} from 'google3/experimental/angularsignalforms';

export class FeedbackComponent {

/* ... */

applyEach(path.friends, friendSchema);

// Doesn't actually hide anything in the UI.

});

});

}

Sometimes we want to apply multiple rules based only if certain condition is true.

// Applies for all pets

required(pet.cute);

// Rules that only apply for dogs.

applyWhen(

({value}) => value().type === 'dog',

(pathWhenTrue) => {

// Only required for dogs, but can be entered for cats

// Doesn't apply for dogs

hidden(pathWhenTrue.purringIntensity);

}

);

applyWhen(

({value}) => value().type === 'cat',

(pathWhenTrue) => {

// Those rules only apply for cats.

validate(pathWhenTrue.b, /* validation rules */);

applyEach(pathWhenTrue, /* array rules */);

applyWhen(/* we can even have nested apply whens. */);

export class FeedbackComponent {

/* ... */

readonly form = form(this.data, (path) => {

applyWhen(

path,

({value}) => value().recommendToFriends,

export class FeedbackComponent {

/* ... */

required(path.name);

});

required(path.feedback);

? undefined

: {kind: 'confirmationPassword'};

})

applyWhen(

},

);

});

}

const dataKey = defineResource(path, {

params: (ctx) => {

if (node.shouldSkipValidation() || !node.syncValid()) {

return undefined;

}

readonly valueOf: <P>(p: FieldPath<P>) => P;

readonly stateOf: <P>(p: FieldPath<P>) => FieldState<P>;

readonly fieldOf: <P>(p: FieldPath<P>) => Field<P>;

data: <D>(path: DataKey<D>) => D;

};

return (this._fieldContext ??= {

value: this.value,

state: this,

field: this.fieldProxy,

stateOf<P>(p: FieldPath<P>) {

return logicFn;

}

return (arg: FieldContext<any>): TReturn => {

if (!predicate.fn(predicateField.fieldContext)) {

// don't actually run the user function

return defaultValue;