angular - 在 Angular 中抽象表单组

Question

简而言之，我想创建文本输入字段的组件，以便替换与该组件一起工作的注释掉的代码。

<app-text-input [name]="Address" [mod]="resto.address" class="col-sm"></app-text-input>
<!--<div class="form-group col-sm">
  <label for="Address">Address</label>
  <input type="text" class="form-control" id="Address" name="Address" [(ngModel)]="resto.address" >
</div>-->

我的组件读取

@Component({
  selector: 'app-text-input',
  template: `
    <div class="form-group">
      <label for="name">{{name}}</label>
      <input type="text" class="form-control" id="name" name="name" [(ngModel)]="mod" >
    </div>
  `,
  styles: ['']
})
export class TextInput {
  @Input() name: String;
  @Input() mod;

  constructor() { }
}

我得到了正在设置的字段的值，但没有任何更改使它备份。我很确定我做的事情根本上是错误的，但迄今为止我在网上找到的所有例子都是我试图抽象出来的长手风格。