Answer Perfect Form Component

A reusable Angular standalone component that provides a textarea input for answering questions with automatic API submission on blur. This component is designed for modern Angular applications and is fully compatible with Angular 18.2.x.

Features

• Automatic API submission on textarea blur
• Real-time status indicators (submitting, success, error)
• Error handling with user-friendly messages
• Responsive design with modern styling
• TypeScript support with full type definitions
• Angular 18.2.x compatible using modern Angular patterns

Installation

npm install answer-perfect-form-component

Usage

1. Import the Component

In your standalone component:

import { Component } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { FormQuestionComponent } from 'answer-perfect-form-component';

@Component({
  selector: 'app-my-component',
  standalone: true,
  imports: [
    HttpClientModule, // Required for API calls
    FormQuestionComponent,
  ],
  template: `
    <app-form-question
      apiKey="your-api-key-here"
      endpoint="https://your-api.com/api"
      questionId="question-123"
    >
    </app-form-question>
  `,
})
export class MyComponent {}

2. For NgModule-based Applications

If you're still using NgModules, you can import the component directly:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { FormQuestionComponent } from 'answer-perfect-form-component';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule, // Required for API calls
    FormQuestionComponent, // Import the standalone component directly
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

3. Use the Component

The component can be used in your template as shown in the examples above.

4. Component Properties

| Property | Type | Required | Description | | ------------ | ------ | -------- | ---------------------------------- | | apiKey | string | Yes | API key for authentication | | endpoint | string | Yes | Base URL of the API endpoint | | questionId | string | Yes | Unique identifier for the question |

API Integration

The component automatically sends POST requests to ${endpoint}/answers with the following payload:

{
  "questionId": "question-123",
  "answerText": "User's answer text"
}

Headers

The component includes the following headers:

• Content-Type: application/json
• Authorization: Bearer ${apiKey}

Response Format

The API should return responses in this format:

{
  "success": true,
  "message": "Answer submitted successfully"
}

Or for errors:

{
  "success": false,
  "error": "Error message"
}

Styling

The component includes built-in styles that provide:

• Clean, modern appearance
• Focus states with blue accent color
• Error states with red styling
• Success states with green styling
• Responsive textarea with proper padding and borders

You can override these styles using CSS custom properties or by targeting the component's CSS classes.

Angular Version Compatibility

This library is specifically designed for Angular 18.2.x and uses modern Angular patterns:

• Dependency Injection: Uses the modern inject() function
• TypeScript: ES2022 target with strict type checking
• Module System: ES2022 modules for better tree-shaking
• Angular Compiler: Optimized for Angular 18.2.x compiler options

Development

Building the Library

npm run build

Cleaning Build Artifacts

npm run clean

Publishing

npm run prepublishOnly
npm publish

TypeScript Interfaces

FormQuestionConfig

interface FormQuestionConfig {
  apiKey: string;
  endpoint: string;
  questionId: string;
  answerText: string;
}

ApiResponse

interface ApiResponse {
  success: boolean;
  message?: string;
  error?: string;
}

License

MIT

Support

For issues and questions, please refer to the project repository or contact the maintainers.