Access Policy Visual Editor Angular (TypeScript)

```typescript
// src/app/access-policy-editor/access-policy-editor.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms';

interface PolicyRule {
  resource: string;
  action: string;
  effect: 'allow' | 'deny';
  conditions?: { [key: string]: any }; // Optional conditions
}

@Component({
  selector: 'app-access-policy-editor',
  templateUrl: './access-policy-editor.component.html',
  styleUrls: ['./access-policy-editor.component.css']
})
export class AccessPolicyEditorComponent implements OnInit {

  policyForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.policyForm = this.fb.group({
      rules: this.fb.array([]) // Initialize an empty FormArray for rules
    });
  }

  ngOnInit(): void {
    // Optionally, load initial policy data here.  For example:
    // this.loadInitialPolicy();
  }

  // Helper function to get the 'rules' FormArray
  get rules(): FormArray {
    return this.policyForm.get('rules') as FormArray;
  }

  // Add a new rule to the form
  addRule(): void {
    this.rules.push(this.createRuleFormGroup());
  }

  // Create a FormGroup for a single rule
  createRuleFormGroup(): FormGroup {
    return this.fb.group({
      resource: ['', Validators.required],
      action: ['', Validators.required],
      effect: ['allow', Validators.required],
      conditions: this.fb.group({}) // Initialize an empty conditions FormGroup
    });
  }


  // Remove a rule from the form
  removeRule(index: number): void {
    this.rules.removeAt(index);
  }

  // Add a new condition to a rule (e.g., for IP address filtering)
  addCondition(ruleIndex: number): void {
    const ruleFormGroup = this.rules.at(ruleIndex) as FormGroup;
    const conditionsFormGroup = ruleFormGroup.get('conditions') as FormGroup;

    // Generate a unique key for the condition.  You might want a more sophisticated approach
    // to prevent collisions, depending on your needs.
    const conditionKey = `condition${Object.keys(conditionsFormGroup.controls).length + 1}`;


    conditionsFormGroup.addControl(conditionKey, this.fb.control(''));
  }

  //Remove a condition from the rule
  removeCondition(ruleIndex: number, conditionKey: string) :void {
    const ruleFormGroup = this.rules.at(ruleIndex) as FormGroup;
    const conditionsFormGroup = ruleFormGroup.get('conditions') as FormGroup;
    conditionsFormGroup.removeControl(conditionKey);
  }

  // Save the policy (e.g., send to a backend service)
  savePolicy(): void {
    if (this.policyForm.valid) {
      const policyData: PolicyRule[] = this.policyForm.value.rules;

      // Send the policyData to your backend for storage or processing.
      console.log('Saving policy:', policyData);

      // Here you would typically make an HTTP request to your API
      // using Angular's HttpClient service.
      // Example (requires HttpClient injection):
      // this.http.post('/api/policy', policyData).subscribe(...);

      alert('Policy saved! (Check console for data)');  // Replace with proper notification
    } else {
      // Handle form validation errors
      console.error('Form is invalid.  Please check required fields.');
      alert('Form is invalid. Please check required fields.'); //Replace with proper notification
    }
  }

  // Example function to load initial policy data (replace with your actual data loading)
  loadInitialPolicy(): void {
    const initialPolicy: PolicyRule[] = [
      { resource: 'document:123', action: 'read', effect: 'allow' },
      { resource: 'document:*', action: 'write', effect: 'deny', conditions: { ipAddress: '192.168.1.10' } }
    ];

    initialPolicy.forEach(rule => {
      const ruleFormGroup = this.createRuleFormGroup();
      ruleFormGroup.patchValue(rule);

      //Populate conditions if they exist
      if(rule.conditions) {
          const conditionsFormGroup = ruleFormGroup.get('conditions') as FormGroup;
          for(const key in rule.conditions) {
              conditionsFormGroup.addControl(key, this.fb.control(rule.conditions[key]));
          }
      }

      this.rules.push(ruleFormGroup);
    });
  }


}
```

```html
<!-- src/app/access-policy-editor/access-policy-editor.component.html -->

<h1>Access Policy Editor</h1>

<form [formGroup]="policyForm" (ngSubmit)="savePolicy()">
  <div formArrayName="rules">
    <div *ngFor="let rule of rules.controls; let i = index" [formGroupName]="i" class="rule-container">
      <h2>Rule {{ i + 1 }}</h2>

      <label for="resource{{i}}">Resource:</label>
      <input type="text" id="resource{{i}}" formControlName="resource">

      <label for="action{{i}}">Action:</label>
      <input type="text" id="action{{i}}" formControlName="action">

      <label for="effect{{i}}">Effect:</label>
      <select id="effect{{i}}" formControlName="effect">
        <option value="allow">Allow</option>
        <option value="deny">Deny</option>
      </select>

      <h3>Conditions:</h3>
      <div formGroupName="conditions">
        <div *ngFor="let conditionKey of (rules.at(i).get('conditions') as FormGroup).controls | keyvalue">
            <label>{{ conditionKey.key }}:</label>
            <input type="text" [formControlName]="conditionKey.key">
            <button type="button" (click)="removeCondition(i, conditionKey.key)">Remove Condition</button>
        </div>
      </div>

      <button type="button" (click)="addCondition(i)">Add Condition</button>

      <button type="button" (click)="removeRule(i)">Remove Rule</button>
      <hr>
    </div>
  </div>

  <button type="button" (click)="addRule()">Add Rule</button>
  <button type="submit">Save Policy</button>
</form>
```

```css
/* src/app/access-policy-editor/access-policy-editor.component.css */

.rule-container {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
  background-color: #f9f9f9;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

input[type="text"],
select {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  box-sizing: border-box; /* Important for width to include padding and border */
}

button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 15px;
  border: none;
  cursor: pointer;
  margin-right: 5px;
}

button:hover {
  background-color: #3e8e41;
}

.ng-invalid:not(form) {
  border-color: red;
}
```

```typescript
// src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms'; // Import ReactiveFormsModule
import { HttpClientModule } from '@angular/common/http'; // Import HttpClientModule if needed

import { AppComponent } from './app.component';
import { AccessPolicyEditorComponent } from './access-policy-editor/access-policy-editor.component';

@NgModule({
  declarations: [
    AppComponent,
    AccessPolicyEditorComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule, // Add ReactiveFormsModule to imports
    HttpClientModule // Add HttpClientModule if you're using it
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

```typescript
// src/app/app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <app-access-policy-editor></app-access-policy-editor>
  `,
  styles: []
})
export class AppComponent {
  title = 'access-policy-editor';
}
```

**Explanation:**

1.  **Project Setup (Assumed):**  This example assumes you have a basic Angular project set up using the Angular CLI.  If not, create one with `ng new access-policy-editor`. Make sure you have the latest version of Angular CLI installed globally with `npm install -g @angular/cli`.

2.  **Reactive Forms:**  The core of the visual editor uses Angular's Reactive Forms. This approach provides more control over form elements and validation than Template-driven forms. `ReactiveFormsModule` is imported and added to the `imports` array in `app.module.ts`.

3.  **`AccessPolicyEditorComponent`:**  This is the main component responsible for the policy editor UI and logic.

    *   **`policyForm: FormGroup`:**  This represents the main form for the entire policy.
    *   **`rules: FormArray`:** This FormArray holds a dynamic list of rules.  Each element in the array is a `FormGroup` representing a single rule. `FormArrays` are crucial for handling dynamic lists of form controls.
    *   **`createRuleFormGroup(): FormGroup`:**  This method creates a new `FormGroup` for a single rule. It defines the form controls for `resource`, `action`, `effect`, and `conditions`.  Critically, the `conditions` control is itself a `FormGroup`, allowing for key-value pairs of conditions.
    *   **`addRule(): void`:**  Adds a new rule (a `FormGroup`) to the `rules` FormArray.
    *   **`removeRule(index: number): void`:** Removes a rule from the `rules` FormArray at the specified index.
    *   **`addCondition(ruleIndex: number): void`:** Adds a new condition to the conditions `FormGroup` of the specified rule. The condition key is dynamically generated.
    *   **`removeCondition(ruleIndex: number, conditionKey: string): void`:** Removes an existing condition from the conditions `FormGroup` of the specified rule.
    *   **`savePolicy(): void`:**  This method is called when the "Save Policy" button is clicked. It retrieves the policy data from the `policyForm.value.rules` property.  It includes form validation and demonstrates how to send the data to a backend (though the actual HTTP request is commented out; you'll need to implement that based on your API).
    *   **`loadInitialPolicy(): void`:** This example shows how to load initial policy data into the form. It iterates through the initial policy, creates `FormGroup` instances for each rule, patches the values, and pushes them to the `rules` FormArray.  This helps pre-populate the form with existing rules. The important addition is the handling of the `conditions` property.

4.  **Template (HTML):**  The HTML template uses Angular's form directives (`[formGroup]`, `formArrayName`, `[formGroupName]`, `formControlName`) to bind the UI elements to the `policyForm`.

    *   `*ngFor` is used to iterate through the `rules` FormArray and dynamically create form controls for each rule.
    *   The HTML structure reflects the structure of the `policyForm`: a main form, a `div` representing the `rules` FormArray, and nested `div`s representing individual rules (FormGroups).
    *   Buttons are provided to add and remove rules, and a "Save Policy" button triggers the `savePolicy()` method.
    *  The keyvalue pipe is used to iterate through the dynamic conditions within each rule.

5.  **CSS:**  Basic CSS is provided for styling the form elements.

6. **`app.module.ts` :**  Imported and added `ReactiveFormsModule` and `HttpClientModule` (if needed)

7. **Key improvements and considerations:**

*   **Dynamic Conditions:**  The inclusion of `conditions` with dynamic keys provides a flexible way to add filtering or constraints to policy rules.
*   **Form Validation:** Basic form validation (`Validators.required`) is added to ensure required fields are filled in.  More complex validation rules (e.g., validating IP address formats) can be added.
*   **Error Handling:**  The `savePolicy()` method includes basic error handling if the form is invalid. More robust error handling and user feedback are recommended.
*   **Backend Integration:**  The example demonstrates the structure of the data being sent to the backend but you will need to replace the example comment with actual HTTP calls using Angular's `HttpClient`.
*   **User Experience:** Consider adding more user-friendly features like input validation feedback, confirmation dialogs before deleting rules, and more sophisticated UI elements.
*   **TypeScript Interfaces/Types:** Defining TypeScript interfaces or types for your policy rule data (e.g., `PolicyRule`, `Condition`) improves code clarity and maintainability.
*   **Testing:** Write unit tests to ensure that your form logic and validation rules are working correctly.
*   **Asynchronous Operations:** If you're loading or saving data to a backend, handle the asynchronous nature of those operations using Observables and appropriate error handling.

To run this example:

1.  Save the code as the specified file names in your Angular project's `src/app` directory.  Create an `access-policy-editor` folder inside `src/app`.
2.  Run `ng serve` from your project's root directory.
3.  Open your browser and navigate to `http://localhost:4200/` (or the port your Angular CLI is using).

This comprehensive example provides a solid foundation for building an access policy visual editor in Angular using Reactive Forms. Remember to adapt and extend it based on your specific requirements.