要将3个formControlName渲染在一行上，可以使用Angular的模板语法和样式来实现。下面是一个示例解决方法：

HTML模板代码：

  

    

      Input 1:
      
    
    

      Input 2:
      
    
    

      Input 3:
      
    
  

CSS样式代码：

.form-row {
  display: flex;
  flex-wrap: wrap;
}

.form-group {
  flex: 1;
  margin-right: 10px;
}

TypeScript代码：

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

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) { }

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

在这个示例中，我们使用了Angular的FormGroup和FormControl来创建一个包含3个表单控件的表单。通过使用flex布局并设置相应的CSS样式，可以将这3个表单控件渲染在同一行上。