在 FormBuilder 中使用对象

Question

我创建了一个响应式表单，它运行良好：

ts 文件：

this.formulario = this.formBuilder.group({
  title:[null, [Validators.required, Validators.minLength(3)] ],
  dateHour:[null, [Validators.required] ],
  description:[null, [Validators.required] ], 
  location: this.formBuilder.group({
            idLocation: [null],
            lat:[null],
            lng:[null],
  }),
});

在那之后，我为每个人创建了一个class：

export class Ocr {
    idOcr: number;
    title: string;
    dateHour: Date;
    description: string;
    location: Location;
}

export class Location {
    idLocation: number;
    lat: number;
    lng: number;
}

然后，我在ts文件中实例化了对象，我想在FormBuilder中使用属性。这种情况不知道在location属性里写什么：

ocr: Ocr = new Ocr();

...

this.formulario = this.formBuilder.group({
  title:[this.ocr.title, [Validators.required, Validators.minLength(3)] ],
  dateHour:[this.ocr.DateHour, [Validators.required] ],
  description:[this.ocr.description, [Validators.required] ], 
  location: ??????? 
  }),
});

我也想知道如何在 html 文件中表示它。

Answer 1

您可以像这样添加一个新的 formGroup：

this.formulario = this.formBuilder.group({
  title:[this.ocr.title, [Validators.required, Validators.minLength(3)] ],
  dateHour:[this.ocr.DateHour, [Validators.required] ],
  description:[this.ocr.description, [Validators.required] ], 
  location: this.formBuilder.group({
      lat:[this.ocr.location.lat, [Validators.required] ],
      lng:[this.ocr.location.lng, [Validators.required] ],
    })
  }),
});

在 FormBuilder 中使用对象

Use of objects inside FormBuilder

angular

typescript

angular-forms

angular2-formbuilder