如何在 Angular 中将此模板驱动的表单更改为反应式表单？答案

【问题标题】：How to change this template driven form to Reactive form in Angular?如何在 Angular 中将此模板驱动的表单更改为反应式表单？
【发布时间】：2022-01-23 09:43:36
【问题描述】：

如何将此模板驱动的表单更改为响应式表单？我想将此模板驱动的表单更改为反应式表单。我应该做哪些更改才能将其更改为 Reactive 形式？代码是完整的，不需要其他修改吗？有人可以帮我解决这个问题吗，我附上了所有必需的代码。在更改为响应式表单时我们应该记住哪些事项，以及为什么响应式表单优于模板驱动表单？

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>

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;
}

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);
  }

}

模型类

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;
    }
   
}

服务类

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;
  }

}

【问题讨论】：

您只需要更改 ngmodel 表单，并通过将表单控件替换为 ngmodel 输入来使其成为反应式
我试过了，我做不到。你能展示样品吗
当然让我为你写一个小sn-p
plz，如果可能，请将此表单更改为反应式。我做到了，但我必须改变一切，我非常困惑
如果这对我的回答有帮助，请投票

标签： html css angular typescript

【解决方案1】：

这里有一个简单的代码sn-p，

假设您的组件名称为 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());
    }
}

您的 Html 可能如下所示，

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

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

【讨论】：