html - ¿Cómo cambiar este formulario dirigido por plantilla a un formulario reactivo en Angular?

¿Cómo cambiar este formulario dirigido por plantilla a formulario reactivo? Quiero cambiar este formulario dirigido por plantilla a formulario reactivo. ¿Qué cambios debo hacer para cambiarlo a formulario reactivo? ¿El código está completo, no se requiere ninguna otra modificación? ¿Alguien puede ayudarme con esto? Estoy adjuntando todos los códigos necesarios. ¿Qué cosas debemos tener en cuenta al cambiar a un formulario reactivo, y también por qué se prefiere el formulario reactivo sobre el formulario dirigido por plantilla?

Código HTML

 <html>
 <body>
   <nav>
       <div class = "navbar-header">
           <a href="#" class="navbar-brand">Image Change on clicking Enter in TextBox</a>
           <input class = "col" type = "text" readonly value ="{{imgNumber}}/3  {{cityImageId}}">
       </div>
    </nav>

<div class = "textarea" contenteditable #scrollDiv [scrollTop]="scrollDiv.scrollHeight" wrap="hard">
    <img contenteditable="false" [src]="imagePath" width = "1090px" height = "440"/>
</div>


<form>
    <div>
        <input type = "text" class="col2" [(ngModel)]="pincode" (keyup.enter)="generatecityDetailArray()" maxlength="6" [ngModelOptions]="{standalone: true}"/>
    </div>
</form>


<div>
    <input type = "label" class = "col3" value = "Pin Code" readonly />
</div>



 </body>
</html>

Código CSS

    nav {
    background-color:black;
    border : 0;
}

.navbar-header{
            text-align: center;
}
.navbar-header{
    color:white;
}
.col{
    margin-left: 950px;
    text-align: right;
    border : 0;
    background-color:rgb(160,0,0);
}

.textarea{
    overflow: scroll;
    height: 400px;
    width:1090px;
    background-color:white;
    margin-left: 100px;
    margin-top: 50px;

     object-fit: none;
     object-position: 1000px 200px;
}

.col2{
    width:230px;
    height: 30px;
    margin-top: 20px;
    margin-left: 950px;
}

.col3{
    width:230px;
    height: 30px;
    margin-top: 20px;
    margin-left: 950px;
}

Código TypeScript

    import { Component, OnInit } from '@angular/core';
import { CityClassificationService } from 'src/app/service/city-classification.service';

@Component({
  selector: 'app-city-classification',
  templateUrl: './city-classification.component.html',
  styleUrls: ['./city-classification.component.css']
})
export class CityClassificationComponent implements OnInit {
  imgNumber : number =-1;
  cityImageId : number = -1;
  imagePath : string ='';
  pincode:string='';
  curImageNumber:number=0;
  imageDetails:{imageName:string,cityImageId:number,imgNumber:number}[]=[];
  
 cityDetailArray :{ pincode : string; cityImageId : number; imgNumber:number;}[] = [];
  
 

 constructor(private cityService:CityClassificationService) { }
 
 ngOnInit(): void {
   this.imageDetails=this.cityService.getImageObject();
    this.getNextImage(this.imageDetails[this.curImageNumber]);
  }

  getNextImage(imageObj:{imageName:string,cityImageId:number,imgNumber:number}):void{
    this.imgNumber= imageObj.imgNumber;this.imagePath=`assets/images/${imageObj.imageName}.png`;this.cityImageId=imageObj.cityImageId;
  }

  generatecityDetailArray():void{
    if(this.pincode=='' || this.pincode.toString().length>6){alert('Enter Valid PinCode');return;};
    this.cityDetailArray.push(
      {pincode:this.pincode, cityImageId:this.cityImageId, imgNumber:this.imgNumber}
    );
    this.pincode='';
    this.curImageNumber++;
    if(this.curImageNumber==this.imageDetails.length){this.submitForm();return;}
    this.getNextImage(this.imageDetails[this.curImageNumber]);
  }

  submitForm(){
    //TODO here....
    this.cityService.getAPi(this.cityDetailArray);
  }

}

Clase de modelo

export class CityClassification{
  
    pinCode : string;
    cityImageId : number;
    imgNumber:number;
   
    constructor(pinCode : string, cityImageId : number,imgNumber:number){
        this.pinCode = pinCode;
        this.cityImageId = cityImageId;
        this.imgNumber = imgNumber;
    }
   
}

Clase de servicio

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class CityClassificationService {
  imageDetails:{imageName:string,cityImageId:number,imgNumber:number}[]=[
    {imageName:'Ghazipur1',cityImageId:101,imgNumber:1},
    {imageName:'Nashik2',cityImageId:102,imgNumber:2},
    {imageName:'Noida3',cityImageId:103,imgNumber:3}
    
  ]

 
  constructor() { }


  getAPi(formBody:any){
    //API TO SUBMIT FORM.....
    console.log('INSIDE SERvice.......',formBody);
  }

  getImageObject():any{
    //API HERE TO GET IMAGE
    return this.imageDetails;
  }

}

Respuesta #1

aquí tienes un fragmento de código simple para ti,

Digamos que tienes un componente llamado AppComponent,

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
    title = 'stackoverflow-examples';
    declare MultipleSelect: any;
    textInputForm: FormGroup;

    get textInputControl() {
      return this.textInputForm.get('textInputControl') as FormControl;
    }

    constructor(
      private fb: FormBuilder
    ) {
      this.textInputForm = new FormGroup(
        {
          textInputControl: new FormControl('', [Validators.maxLength(6)])
        }  
      );
    }

    ngOnInit() {
    }

    onClick(): void{
      // Just to show you that form can read the values,
      console.log(this.textInputForm.getRawValue());
    }
}

Tu Html puede verse así a continuación,

<form>
  <label>
    Input Name: 
    <input type="text" class="col2" [formControl]="textInputControl" maxLength="6"/>
  </label>
</form>

<button (click)="onClick()">Click</button>