fix(compiler-cli): report invalid bindings on form controls

Adds validation that users don't bind to unsupported properties on nodes with the `Field` directive.

Author: crisbeto

goldens/public-api/compiler-cli/error_code.api.md

@@ -53,6 +53,7 @@ export enum ErrorCode {
     DUPLICATE_DECORATED_PROPERTIES = 1012,
     DUPLICATE_VARIABLE_DECLARATION = 8006,
     FORBIDDEN_REQUIRED_INITIALIZER_INVOCATION = 8118,
+    FORM_FIELD_UNSUPPORTED_BINDING = 8022,
     HOST_BINDING_PARSE_ERROR = 5001,
     HOST_DIRECTIVE_COMPONENT = 2015,
     HOST_DIRECTIVE_CONFLICTING_ALIAS = 2018,

packages/compiler-cli/src/ngtsc/diagnostics/src/error_code.ts

@@ -436,6 +436,9 @@ export enum ErrorCode {
    */
   DEFER_TRIGGER_MISCONFIGURATION = 8021,
 
+  /** Raised when the user has an unsupported binding on a `Field` directive. */
+  FORM_FIELD_UNSUPPORTED_BINDING = 8022,
+
   /**
    * A two way binding in a template has an incorrect syntax,
    * parentheses outside brackets. For example:

packages/compiler-cli/src/ngtsc/typecheck/src/oob.ts

@@ -237,6 +237,11 @@ export interface OutOfBandDiagnosticRecorder {
       | TmplAstInteractionDeferredTrigger
       | TmplAstViewportDeferredTrigger,
   ): void;
+
+  /**
+   * Reports an unsupported binding on a form `Field` node.
+   */
+  formFieldUnsupportedBinding(id: TypeCheckId, node: TmplAstBoundAttribute): void;
 }
 
 export class OutOfBandDiagnosticRecorderImpl implements OutOfBandDiagnosticRecorder {
@@ -851,6 +856,19 @@ export class OutOfBandDiagnosticRecorderImpl implements OutOfBandDiagnosticRecor
       ),
     );
   }
+
+  formFieldUnsupportedBinding(id: TypeCheckId, node: TmplAstBoundAttribute): void {
+    this._diagnostics.push(
+      makeTemplateDiagnostic(
+        id,
+        this.resolver.getTemplateSourceMapping(id),
+        node.sourceSpan,
+        ts.DiagnosticCategory.Error,
+        ngErrorCode(ErrorCode.FORM_FIELD_UNSUPPORTED_BINDING),
+        `Binding to '${node.name}' is not allowed on nodes using the [field] directive`,
+      ),
+    );
+  }
 }
 
 function makeInlineDiagnostic(

packages/compiler-cli/src/ngtsc/typecheck/src/type_check_block.ts

@@ -745,6 +745,26 @@ class TcbGenericDirectiveTypeWithAnyParamsOp extends TcbDirectiveTypeOpBase {
  * A `TcbOp` which constructs an instance of the signal forms `Field` directive.
  */
 class TcbFieldDirectiveTypeOp extends TcbOp {
+  // Should be kept in sync with the `FormUiControl` bindings,
+  // defined in `packages/forms/signals/src/api/control.ts`.
+  private invalidBindingNames = new Set([
+    'value',
+    'checked',
+    'errors',
+    'invalid',
+    'disabled',
+    'disabledReasons',
+    'name',
+    'readonly',
+    'touched',
+    'max',
+    'maxLength',
+    'min',
+    'minLength',
+    'pattern',
+    'required',
+  ]);
+
   constructor(
     private tcb: Context,
     private scope: Scope,
@@ -760,6 +780,14 @@ class TcbFieldDirectiveTypeOp extends TcbOp {
   }
 
   override execute(): ts.Identifier {
+    const inputs = this.node instanceof TmplAstHostElement ? this.node.bindings : this.node.inputs;
+
+    for (const input of inputs) {
+      if (input.type === BindingType.Property && this.invalidBindingNames.has(input.name)) {
+        this.tcb.oobRecorder.formFieldUnsupportedBinding(this.tcb.id, input);
+      }
+    }
+
     const refType = this.tcb.env.referenceType(this.dir.ref);
 
     if (!ts.isTypeReferenceNode(refType)) {

packages/compiler-cli/src/ngtsc/typecheck/testing/index.ts

@@ -1029,6 +1029,7 @@ export class NoopOobRecorder implements OutOfBandDiagnosticRecorder {
   illegalForLoopTrackAccess(): void {}
   inaccessibleDeferredTriggerElement(): void {}
   controlFlowPreventingContentProjection(): void {}
+  formFieldUnsupportedBinding(): void {}
   illegalWriteToLetDeclaration(id: TypeCheckId, node: AST, target: TmplAstLetDeclaration): void {}
   letUsedBeforeDefinition(
     id: TypeCheckId,