Angular表单（响应式表单）和NgRx是两个用于开发Angular应用程序的重要概念。

Angular表单（响应式表单）提供了一种使用响应式编程方式处理表单的方法。它基于RxJS库，使用Observable流来管理表单的状态和值。下面是一个使用Angular表单的示例：

1. 首先，导入必要的模块和类：

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

2. 在组件中创建一个表单：

@Component({
  selector: 'app-my-form',
  template: `
    

      
      Submit
    
  `,
})
export class MyFormComponent implements OnInit {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.myForm = this.fb.group({
      name: ['', Validators.required],
    });
  }

  onSubmit() {
    if (this.myForm.valid) {
      console.log(this.myForm.value);
    }
  }
}

在上面的代码中，我们使用FormBuilder类创建了一个myForm表单，并定义了一个name字段。

NgRx是一个用于管理应用程序状态的状态管理库。它基于Redux设计模式，通过单一的数据源和不可变的状态来管理应用程序的状态。下面是一个使用NgRx的示例：

1. 首先，导入必要的模块和类：

import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { AppState } from './app.state';
import { AddItem } from './actions/item.actions';

2. 在组件中使用Store来管理应用程序的状态：

@Component({
  selector: 'app-my-component',
  template: `
    
    Add Item
  `,
})
export class MyComponent {
  itemName: string;

  constructor(private store: Store) {}

  addItem() {
    if (this.itemName) {
      this.store.dispatch(new AddItem(this.itemName));
      this.itemName = '';
    }
  }
}

在上面的代码中，我们使用Store类来分发AddItem动作，并将itemName重置为空。

这是使用Angular表单（响应式表单）和NgRx的基本示例。您可以根据需要进行调整和扩展。